ボタンを押したらテーブル行を取得する方法

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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です