【JQuery】テーブルで行選択されているものの値を取得したい

質問させていただきます。
テーブルの行を選択した後、ボタンクリックで選択されている行の値を取得したいです。
テーブルの行の選択(クリック)時にはアラートなどで値を確認できていますが、
(<tr>ループ内なら値を取得することができている)
選択した後に別途テーブル(ループ外)に配置したボタンをクリックすることによって、
選択されている行の値を取得するにはどうしたらいいでしょうか？


例)
ここのボタンで下記の行選択の文字列を取得したい。
<input type="button">

<table>
<?php for ($i = 0; $i < 10; $i++) : ?>
<tr>
<td>
<?php echo $i . '番目の行です。'; ?>
</td>
</tr>
<?php endfor; ?>
</table>


よろしくお願いいたします。

質問者からの補足コメント

• 

  続きです。
  function trClick(tr_id)
  {
  tr_id.css("background-color", "#70ffb7");
  $(".thread_id").addClass("thread_selected"); // 行選択でクラスをフラグ代わりに追加
  tr_id.mouseover(function() {
  $(this).css("background-color", "#CCFFCC").css("cursor", "pointer");
  });
  tr_id.mouseout(function() {
  $(this).css("background-color", "#70ffb7").css("cursor", "normal");
  });
  }

    補足日時：2016/02/08 14:27

• 

  /* 選択ボタン */
  $("#thread_select").click(function() {
  　 // 現状ID値がどれもループを抜けた最終値になっています
  // 行ごとのID値を取得したいです。
  alert($(".thread_selected").val());
  });

  No.3の回答に寄せられた補足コメントです。 補足日時：2016/02/08 14:30

No.4 ベストアンサー 回答者： yambejp 回答日時： 2016/02/08 14:56

・「.thread_id」

・「thread_selected」
・「<tr>内のhidden ID値」

など最初提示されたテーブルのサンプルに書いてませんよね
ちょっとグダグダ過ぎて回答がつけられません
クラスで処理したいのかダイレクトにスタイルをいじりたいのか
仕様をきっちり決めた方がよいのでは？

この回答へのお礼

そうですね。より単純な方が良いかと最初に目的のみを質問しましたが、
うまく伝わらないので、より詳細を記載しようとしたのがまずかったですね。
ありがとうございました。

お礼日時：2016/02/08 15:00

No.3 回答者： yambejp 回答日時： 2016/02/08 13:19

＞・trのスタイルでbackground-Colorをいじっている

こんな感じ？

<script>
$(function() {
$("input[type=button]").click(function(event){
myfunc(this.value);
});
});
function myfunc(c){
var bgcolor='';
switch(c){
case "red":
bgcolor='rgb(255, 0, 0)';
break;
case "blue":
bgcolor='rgb(0, 255, 0)';
break;
case "green":
bgcolor='rgb(0, 0, 255)';
break;
}
$("tr").each(function() {
if($(this).css('background-color')==bgcolor){
alert($(this).children("td").text());
};
});
}
</script>
<input type="button" value="red">
<input type="button" value="blue">
<input type="button" value="green">
<table>
<tr style="background-Color:#ff0000;"><td>1</td></tr>
<tr style="background-Color:#00ff00;"><td>2</td></tr>
<tr style="background-Color:#0000ff;"><td>3</td></tr>
</table>

この回答へのお礼

色々と試しているのですが、うまく動かすことができませんでした。
動的にbackground-colorを変化させている時はif判定がうまくできないのでしょうか。

今はテーブルのセルを下記の様に変化させ、クリックで色を変更させる様にしています。
クリックされた行をフラグ代わりにクラス名を追加してキープし、選択ボタンをクリックすることで
<tr>内のhidden ID値を得たいのです。現状はどれを選択しても同じ値になってしまいます。

続きは補足で

$(function(){

trDefault("#tr-background-color");

/* tr選択で色変更ファンクション実行 */
$("#tr-background-color tr").click(function() {
trDefault("#tr-background-color");
trClick($(this));
});


function trDefault(table_id)
{
var tr_selector = table_id + " tr";
$(tr_selector).css("background-color", "#ffffff");

$(".thread_id").removeClass("thread_selected"); // 選択されていない場合はクラス名削除

$(tr_selector).mouseover(function() {
$(this).css("background-color", "#99ffff").css("cursor", "pointer");
});

$(tr_selector).mouseout(function() {
$(this).css("background-color", "#ffffff").css("cursor", "normal");
});
}

お礼日時：2016/02/08 14:26

No.2 回答者： yambejp 回答日時： 2016/02/08 11:51

>選択状態をキープ(例えばtr上を色変更など)しておいて、

これはどうやっていますか？
・trのスタイルでbackground-Colorをいじっている
・trのtd要素の各background-Colorをいじっている
・trにclassを追加して色を変更している

それぞれによってtrの抜き出し方が変わってくると思います

この回答へのお礼

・trのスタイルでbackground-Colorをいじっている
になります。

お礼日時：2016/02/08 11:59

No.1 回答者： yambejp 回答日時： 2016/02/08 11:26

＞選択した後に別途テーブル(ループ外)に配置したボタンをクリックすることによって、

行を選択の意味がよくわかりませんが、
明示的に各行にチェックボックスをつけて選択状態をキープするとかでは？
行を選択するといってもボタンを押したらボタンが選択されていませんか？

この回答へのお礼

わかりにくくてすいません。
選択状態をキープ(例えばtr上を色変更など)しておいて、
ボタンをクリックでそのキープ状態だったtr上の値を取得したいのです。

お礼日時：2016/02/08 11:36