遍历表中的行

Question

我有一个包含多个表行的表，每个td都有一个输入，我试图在表行中遍历，这样我就可以通过另一个输入来设置输入的值，它只对第一个表行起作用，如何为表中的所有行创建？我有一个按钮，当我执行一个新的tr时，它会附加一个tr，它不会在其中设置值，下面是我的代码：

​

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');

$('button').click(function () {
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
             '<td><input type="text"></td>' +
             '<td><input type="text" class="mySecondInput"></td></tr>';
    $('tbody').append(tr);	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
   </tr>
   <tr>
     <td><input type="text" class="myFirstInput"></td>
     <td><input type="text"></td>
     <td><input type="text" class="mySecondInput"></td>
   </tr>
   <tr>
     <td><input type="text" class="myFirstInput"></td>
     <td><input type="text"></td>
     <td><input type="text" class="mySecondInput"></td>
   </tr>
  </tbody>
</table>

<button>Append row</button>

​

Answer 1

您的问题是您正在使用is，这在HTML中必须是唯一的。将它们改为类，这应该会像预期的那样工作。

​

function addVal() {
  var elems = $('.myFirstInput').closest('tr').find('.mySecondInput');
  $.each(elems, function(s, e) {
  if($(e).val() === '') {
      $(e).val('1000');
   }
  });
}

$(document).ready(function() {
$('button').click(function () {
			var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
			$('tbody').append(tr);
      addVal();
		});
    
    addVal();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
  </tbody>
</table>

<button>Append row</button>

​

Answer 2

问题在于您使用的是id。根据定义，id应该是唯一的。当您的代码运行时，它只适用于它找到的id的第一项。只需将id更改为class就可以了(这部分)。

其次，看起来您正在动态地创建行(添加tr)。

​

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');

$('button').click(function () {
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
    $('tbody').append(tr);
    $('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
</tbody>
</table>

<button>Append row</button>

​

Answer 3

在同一个id中使用同名的多个document是不对的。使用class代替如下方式：

​

$('input.mySecondInput').each(function(i, el){
  $(el).val('1000');
});

$('button#btnAppendRow').click(function () {
  var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
  '<td><input type="text"></td>' +
  '<td><input type="text" class="mySecondInput"></td></tr>';
  $('tbody').append(tr);

  $('input.mySecondInput:last-child').val('1000');
});

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

<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
  </tbody>
</table>

<button id="btnAppendRow">Append row</button>

​