javascript - jQuery 在 td 中选择所有行的输入

Question

我试图在更改时计算表中所有输入字段的值。 下面是目标示例 HTML 表，也是我尝试使用 foreach 迭代行来获取表中所有输入字段的值的 jQuery 代码:

$('#mytable :input').change(function() {
  var numrows = 1;
  var rows;
  $('#out').text('');
  $('#mytable tr').each(function() {
    var date = $(this).children('td:eq(1)');
    var obj = $(this).children('td:eq(2):input').value;
    var comma = $('#queryTable tbody tr').length != numrows ? "," : "]";
    var row = "{\"" + date + "\";\"" + obj + "\"}" + comma + "\n";
    //row += date * obj;
    //row =  numrows == 1 ? "["+row : row;
    $('#out').append(row);
    numrows++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="out">
Test
</div>

<table id="mytable" border="1">
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
  </tr>
  <tr>
    <td>value1</td>
    <td>1</td>
    <td>Label1:
      <Input type="text"></Input>
    </td>
  </tr>
  <tr>
    <td>value2</td>
    <td>3</td>
    <td>Label2:
      <Input type="text"></Input>
    </td>
  </tr>
  <tr>
    <td>value3</td>
    <td>ttt</td>
    <td>Label3:
      <Input type="text"></Input>
    </td>
  </tr>
</table>

Fiddle sample code

Answer 1

我建议您使用 keyup 而不是更改，因为更改不会触发，直到输入失去焦点:

$('#mytable :input').keyup(function(){
  var numrows = 1;
  var rows;
  $('#out').text('');
  $('#mytable tr:not(:first-child)').each(function(){
      var date = $(this).children().eq(1).text();
      var obj = $(this).children().eq(2).children('input').val();
      var comma = $('#queryTable tbody tr').length != numrows ? "," : "]";
      var row = "{\""+date+"\";\""+obj+"\"}"+comma+"\n";
      //row += date * obj;
      //row =  numrows == 1 ? "["+row : row;
    $('#out').append(row);
      numrows++;
  });
});

这是你的工作 jsfiddle

http://jsfiddle.net/ZZYD4/891/

顺便说一句，我忽略将其添加到选择器的第一行 :not(:first-child) 因为那是标题行