（已关闭）单击按钮时，如何获取第一个表格行中的输入值并将其显示在新添加的行中答案

【问题标题】：(CLOSED) When button is clicked, How to Get input values in the 1st table row and display them in the newly added rows（已关闭）单击按钮时，如何获取第一个表格行中的输入值并将其显示在新添加的行中
【发布时间】：2017-12-22 17:44:39
【问题描述】：

现在，当单击确定按钮时，将在第一个表格行下方添加其他行。我想知道单击按钮时，如何从第一个表行中获取值，并将这些值添加到新添加的行中（可能超过 1 行取决于用户输入的行数。

想要的结果

No  Tommy  Danvers
1   Tommy  Danvers
2   Tommy  Danvers
3   Tommy  Danvers

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of row');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
    additionalRows = new Array(numNewRows);
    for (i = 0; i < numNewRows; i++) {
      additionalRows[i] = ` <tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" name="name[]"></td>
      <td><input type="text" name="other[]"></td>
  	  </tr>`
      lastRowIndex = lastRowIndex + 1;
    }

    $tbody.append(additionalRows.join());
  }
});

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

<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">OK</button>


<table id="one">
  <tbody>
    <td>
      <input type="text" name="id[]" value="No"></td>
    <td><input type="text" name="name[]" value="Tommy"> </td>
    <td><input type="text" name="other[]" value="Danver"> </td>
  </tbody>
</table>

【问题讨论】：

您似乎已经知道如何使用.val() 来获取现有输入的值。而且您似乎知道如何使用模板字符串来生成包含动态值的 HTML。所以把两者放在一起......
我已经弄明白了，非常感谢您的帮助

标签： javascript jquery

【解决方案1】：

所以我发现这可以满足我的需要，很可能会有更好的答案。如果你有，请分享。谢谢

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of row');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
    additionalRows = new Array(numNewRows);
    for (i = 0; i < numNewRows; i++) {
      additionalRows[i] = ` <tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" name="name[]" class="tommy"></td>
      <td><input type="text" name="other[]" class="danver"></td>
  	  </tr>`
      lastRowIndex = lastRowIndex + 1;
    }

    $tbody.append(additionalRows.join());
  }
});


$("#add-row").on('click', function() {
  var set = $('#tommy,#danver').val();
  if (set) {
   $('.tommy,.danver ').val(set);
    }
  });

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

<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">OK</button>


<table id="one">
  <tbody>
    <td>
      <input type="text" name="id[]" value="No"></td>
    <td><input type="text" name="name[]" value="Tommy" id="tommy"> </td>
    <td><input type="text" name="other[]" value="Danver" id="danver"> </td>
  </tbody>
</table>

【讨论】：

请注意，您不需要添加额外的点击处理程序，您可以在同一个函数中完成所有操作。此外，您可能想测试如果用户已经编辑了新行中的值然后添加更多内容会发生什么...
再次感谢您的帮助，非常感谢

【解决方案2】：

这里有解决方案https://jsfiddle.net/r3rbkf72/1/

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of row');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
    additionalRows = new Array(numNewRows);
    var name = $('table#one tbody td:eq(1) input[name="name[]"]').val();
    var other = $('table#one tbody td:eq(2) input[name="other[]"]').val();
    for (i = 0; i < numNewRows; i++) {
      additionalRows[i] = `<tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" name="name[]" value=${name}></td>
      <td><input type="text" name="other[]" value=${other}></td>
  	  </tr>`
      lastRowIndex = lastRowIndex + 1;
    }

    $tbody.append(additionalRows.join());
  }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">OK</button>


<table id="one">
  <tbody>
    <td>
      <input type="text" name="id[]" value="No"></td>
    <td><input type="text" name="name[]" value="Tommy"> </td>
    <td><input type="text" name="other[]" value="Danver"> </td>
  </tbody>
</table>

下面是我添加的两行代码。

var name = $('table#one tbody td:eq(1) input[name="name[]"]').val();

var other = $('table#one tbody td:eq(2) input[name="other[]"]').val();

这将帮助您接收来自顶行文本框的数据。

【讨论】：