检测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)
});