How am I able to detect change in html table on any cell? 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.

Note that I have other inputs in my form and only wish to detect ones relevant to the table below:

Code:

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();
});

How am I able to detect change in html table on any cell? 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.

Note that I have other inputs in my form and only wish to detect ones relevant to the table below:

Code:

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();
});

• javascript
• html-table

Share Improve this question Follow edited Dec 5, 2017 at 7:41 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 5, 2017 at 1:24 OssamaOssama 2,44388 gold badges4646 silver badges9090 bronze badges 4

• event delegation – epascarello Commented Dec 5, 2017 at 1:25
• Only input with id or every input in table? – Thum Choon Tat Commented Dec 5, 2017 at 1:27
• with id only please – Ossama Commented Dec 5, 2017 at 1:27
• id in the format above – Ossama Commented Dec 5, 2017 at 1:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.

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

This selector will pick every <input> on the page.

Or if you need to isolate the table's inputs, add the table's id in the selector.

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

This selector will pick every <input> within the table.

Saw that you needed only to listen for inputs with ids. 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.

That selector will pick only input#drawing-n-1 and input#drawing-n-2

Demo

$("#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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

event delegation

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