jQuery为td选择所有行的输入

时间:2018-02-20 21:53:18

标签: javascript jquery html

我正在尝试在更改时计算表中所有输入字段的值。 下面是目标示例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

1 个答案:

答案 0 :(得分:-2)

我建议您使用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),因为这是标题行