ボタンを押したらテーブル行を取得する方法
jQueryって大変だよね。
と言うことで今回は、テーブルの中にあるボタンが自分が何番目?ってのを判断させる方法をまとめてみた。
行のデータは、アクティブに変更させられると想定して同じデータをコピーしている。
はい、これで十分に動いたのでハッピーです。(オイ
動作サンプル
<html>
<body>
<table border="1" id="list">
<tr>
<td><input type="button" id="c" value="編集"></td>
<td><input type="text" id="Input" value=""></td>
</tr>
<tr>
<td><input type="button" id="c" value="編集"></td>
<td><input type="text" id="Input" value=""></td>
</tr>
<tr>
<td><input type="button" id="c" value="編集"></td>
<td><input type="text" id="Input" value=""></td>
</tr>
<tr>
<td><input type="button" id="c" value="編集"></td>
<td><input type="text" id="Input" value=""></td>
</tr>
</table>
<table id="edit" style="display:none">
<tr>
<th>行番号</th>
<td><input type="text" id="key" value="" readonly="true"/></td>
</tr>
<tr>
<th>VALUE </th>
<td><input type="text" id="value" value="" /> </td>
</tr>
<tr>
<td colspan=2><input type="button" id="commit" value="更新" /></td>
</tr>
</table>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("[id=c]").click(function(){
var index = $("[id=c]").index(this);
var value = $("[id=Input]").eq(index).val();
$("#value").val(value);
$("#edit").show();
});
$("#list tr").click( function(){
$("#key").val($("tr").index(this));
});
$("#commit").click(function(){
var index = $("#key").val();
console.log($("[id=Input]").eq(index));
var value = $("#value").val();
$("[id=Input]").eq(index).val(value);
$("#edit").hide();
});
</script>