檢測HTML表單元格值更改

Question

如何在任何單元格上檢測html表中的更改？ 目前，我只能檢測一個單元格中的更改，我可以對所有表單元格ID重復相同的代碼，但想知道是否有一種有效的方法。

請注意，我的表單中還有其他輸入，僅希望檢測與下表相關的輸入：

碼：

的HTML：

<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>

javascript：

var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
    alert("aha");
    var data = $('#'+drawing_input).val();
});

Answer 1

使用jQuery，您不需要那么具體。 只需更改選擇器即可偵聽所有<input> 。

$('input').on('change',

該選擇器將選擇頁面上的每個<input> 。

或者，如果您需要隔離表的輸入，請在選擇器中添加表的ID。

$('#xTable input').on('change'...

該選擇器將選擇表中的每個<input> 。

看到您只需要偵聽帶有id的輸入。 如果是這樣，則可以使用方括號和^= ：

$("#xTable input[id^='drawing-n-']").on('change'....

這意味着得到任何<input>具有一個[ id啟動^=與"drawing-n-" ] ，其處於<table>與所述id的xTable 。

該選擇器將僅選擇input#drawing-n-1和input#drawing-n-2

演示版

 $("#xTable input[id^='drawing-n-']").on('change', function(e) { var data = $(this).val(); console.log(data); }); 

 <table id="xTable" border="1" data-mini="true"> <tbody> <tr> <th>Drawing Number</th> <th>Description</th> <th>Sheet Number</th> <th>Issue</th> </tr> <tr> <td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td> <td><input name="drawing-d-1" type="text" /></td> <td><input name="drawing-s-1" type="text" /></td> <td><input name="drawing-i-1" type="text" /></td> <td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td> <td><input name="drawing-d-2" type="text" /></td> <td><input name="drawing-s-2" type="text" /></td> <td><input name="drawing-i-2" type="text" /></td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

事件委托

$("tbody").on("change", "input", function () {
    console.log(this.name, this.value)
});