遍历表格行

Question

我有一个包含多个表行的表，每个td里面都有一个输入，我试图遍历表行，所以我可以通过另一个输入设置输入的值，它只能工作对于第一个表行，如何为表中的所有行创建？我有一个按钮，当我添加一个新的tr时它附加一个tr它没有设置它里面的值，这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是您正在使用id。根据定义，id应该是唯一的。代码运行时，它仅适用于找到的id的第一个项目。只需将您的id更改为class，即可完成此操作（针对该部分）。

其次，看起来您正在动态创建行（添加tr＆＃39; s）。每次插入新行时都运行相同的函数：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的问题是您使用的ID在HTML中必须是唯一的。将它们更改为类，这应该按预期工作。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 4

您必须为每个输入元素提供唯一标识符。第一行应该有 myFirstInput1 和 mySecondInput1 。第二行， myFirstInput2 和 mySecondInput2 ，依此类推。这样，您就可以精确地引用每个输入。