在Jquery中使用循环表的最佳方法是什么

Question

我正在使用jquery，我想知道如何使用each（）循环表中结果，即使我在每个单元格中获取所有输入文本或获取每个单元格函数的最后一个输入，请参阅图片：

<h3>Input Table</h3>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="First Name">
            </td>
            <td>
                <input type="text" placeholder="First Number">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="Second Name">
            </td>
            <td>
                <input type="text" placeholder="Second Number">
            </td>
        </tr>
      </table>
<h3>OutPut Table</h3>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>           
        <tr>
            <td>First Name Should<br /> Appeared Here</td>
            <td>Second Name Should<br /> Appeared Here</td>
        </tr>
        <tr>
            <td>First Number Should<br /> Appeared Here</td>
            <td>Second Number Should<br /> Appeared Here</td>
        </tr>
    </table>
$("tr").has("td").each(function () {

    $("input").val($(this));

    });

$("td").each(function () {

    $("input").var($(this));
});

$("input").val($("td").text());

它必须是一种方法，我确定，但我不知道如何 我很感激你的帮助 提前谢谢。

Answer 1

以下是将第一个表的input的值复制到另一个表的html的方法。
我不能说它是否是最好的，但是它起作用了，它很短！

检查代码段：

＆＃13;

＆＃13;

$("#in").on('keyup change', function() {

  // Gets all the inputs in 1st table
  var ins = $("#in td input");

  // Gets all the tds in the 2nd table and do for each
  $("#out td").each(function(index) {
    // Fills the "html" of the output with the "val" of the input
    $(this).html($(ins[index]).val());
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Input Table</h3>
<table id="in" border="1">
  <tr>
    <th>Name</th>
    <th>Number</th>
  </tr>
  <tr>
    <td>
      <input type="text" placeholder="First Name">
    </td>
    <td>
      <input type="text" placeholder="First Number">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" placeholder="Second Name">
    </td>
    <td>
      <input type="text" placeholder="Second Number">
    </td>
  </tr>
</table>
<h3>OutPut Table</h3>
<table id="out" border="1">
  <tr>
    <th>Name</th>
    <th>Number</th>
  </tr>
  <tr>
    <td>First Name Should<br /> Appeared Here</td>
    <td>Second Name Should<br /> Appeared Here</td>
  </tr>
  <tr>
    <td>First Number Should<br /> Appeared Here</td>
    <td>Second Number Should<br /> Appeared Here</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

请务必分析并分解代码以了解它，我已对其进行了评论。

您必须使用CSS对表格进行样式化，以便每次更改输入时输出表都不会自动调整。

希望它有所帮助。

Answer 2

检查此片段，您可以在下面解决此问题之一。

$(document).ready(function(){

  var table = $("table.input-table tbody");

  table.find('tr').each(function (key, val) {
      $(this).find('td').each(function (k, input) {
          var content = $(this).find('input').val();
          $("table.output-table tbody tr:eq("+k+") td:eq("+key+")").html(content)
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Input Table</h3>
    <table border="1" class="input-table">
        <thead>
          <tr>
              <th>Name</th>
              <th>Number</th>
          </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <input type="text" placeholder="First Name" value="First Name">
            </td>
            <td>
                <input type="text" placeholder="First Number" value="First Number">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="Second Name" value="Second Name">
            </td>
            <td>
                <input type="text" placeholder="Second Number" value="Second Number">
            </td>
        </tr>
        </tbody>
      </table>
<h3>OutPut Table</h3>
    <table border="1" class="output-table">
        <thead>
          <tr>
              <th>Name</th>
              <th>Number</th>
          </tr>  
        </thead>
        <tbody>         
        <tr>
            <td>First Name Should<br /> Appeared Here</td>
            <td>Second Name Should<br /> Appeared Here</td>
        </tr>
        <tr>
            <td>First Number Should<br /> Appeared Here</td>
            <td>Second Number Should<br /> Appeared Here</td>
        </tr>
        </tbody>
    </table>