[英]Detect html table cell value change
How am I able to detect change in html table on any cell? 如何在任何单元格上检测html表中的更改? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way. 目前,我只能检测一个单元格中的更改,我可以对所有表单元格ID重复相同的代码,但想知道是否有一种有效的方法。
Note that I have other inputs in my form and only wish to detect ones relevant to the table below: 请注意,我的表单中还有其他输入,仅希望检测与下表相关的输入:
Code: 码:
html: 的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: javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. 使用jQuery,您不需要那么具体。 Just change the selector to listen for all <input>
s. 只需更改选择器即可侦听所有<input>
。
$('input').on('change',
This selector will pick every <input>
on the page. 该选择器将选择页面上的每个<input>
。
Or if you need to isolate the table's inputs, add the table's id in the selector. 或者,如果您需要隔离表的输入,请在选择器中添加表的ID。
$('#xTable input').on('change'...
This selector will pick every <input>
within the table. 该选择器将选择表中的每个<input>
。
Saw that you needed only to listen for inputs with ids. 看到您只需要侦听带有id的输入。 If so then you can use the brackets and ^=
: 如果是这样,则可以使用方括号和^=
:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input>
that has an [
id
that starts ^=
with "drawing-n-"
]
which is in a <table>
with the id
of xTable
. 这意味着得到任何<input>
具有一个[
id
启动^=
与"drawing-n-"
]
,其处于<table>
与所述id
的xTable
。
That selector will pick only input#drawing-n-1
and input#drawing-n-2
该选择器将仅选择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>
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.