javascript - 遍历行中的每个单元格

Question

我知道这对其他人来说很容易。我只需要一个意见如何在每一行中循环单元格值？因为我创建了一个选项来创建另一个输入或行。我试过了，但每行只得到第一个单元格。

for (var i = 1; i<table.rows.length; i++)
{
    alert(table.rows[i].cells[0].children[0].value);    
}

$(document).ready(function() {
  $("#addMore").click(function() {
    $("#customFields").append('<tr><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>');
  });

  $("#removeRow").click(function() {
    if ($('#customFields tbody tr').length == 1) {
      alert('Error');
    } else {
      $('#customFields tr:last').remove();
    }

  });

});

function myFunction() {

  var table = document.getElementById("customFields");

  for (var i = 1; i < table.rows.length; i++) {
    alert(table.rows[i].cells[0].children[0].value);
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">

  <table class="table" id="customFields">

    <thead>
      <tr>
        <th>First Name</th>
        <th>Middle Name</th>
        <th>Last Name</th>
        <th>Nick Name</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
          <input type="text" class="form-control">
        </td>
        <td>
          <input type="text" class="form-control">
        </td>
        <td>
          <input type="text" class="form-control">
        </td>
        <td>
          <input type="text" class="form-control">
        </td>
      </tr>
    </tbody>

  </table>

  <button type="submit" class="btn btn-primary" id="addMore">+ Add</button>
  <button type="submit" class="btn btn-danger" id="removeRow">- Remove</button>
  <a href="javascript:myFunction()">Run</a>
</div>

Answer 1

您使用 jQuery - 为什么不继续呢？

$(function() {
  $("#run").on("click",function(e) {
    e.preventDefault();
    $("#customFields > tbody > tr > td > input").each(function() {
 // or $("#customFields tbody").find("input").each...
      console.log($(this).val());
    });
  });
});

然后更改为按钮并为链接指定一个 ID

<button type="button" class="btn btn-primary" id="addMore">+ Add</button>
<button type="button" class="btn btn-danger" id="removeRow">- Remove</button>
<a href="#" id="run">Run</a>