Javascript - 在每个新行中复制日期/时间

Question

我有一个包含此字段的表单，通过“添加”按钮我可以添加行:book_date[]、book_desc[]、book_pages[]。

<form method="POST" action="addpages.php" name="books" onmouseover="javascript:sum();">

    <button type="button" onClick="addRow('dataTable')">  ADD Book </button>
        <table id="dataTable" class="form">
            <input type="text" class="form-control" name="date_book[]">
            <input type="text" class="form-control" name="book_pages[]">
            <input type="text" class="form-control" name="book_pages_total">
        </table>
    </form>

添加新行时，我希望将第一个字段 date_book 内的值复制到新行中。

我尝试使用此启动脚本，但这不适用于新行。

var $date_book= $("#date_book[]");

$date_book.on("keydown",function(){
   setTimeout(checkValue,0); 
});

var v2 = $date_book[].val();
var checkValue = function(){
    var v1 = $field1.val();
    if (v1 != v2){
        $date_book[].val(v1);
        v2 = v1;
    }
};

如何复制每个新行中写入的 date_book[] 中的日期值？

我希望能解释我的问题。

谢谢

Answer 1

您应该从有效的 HTML 开始，输入不能是表格的子项。我刚刚根据名称模拟了一些东西。

修复此问题后，在 POJS 中您可以克隆最后一行并将其添加到表中。这也将克隆表单控件当时恰好具有的任何值，因此，如果您只想保留第一个值，则执行此操作并清除其他值，例如

function addRow(tableId) {
  var table = document.querySelector('#' + tableId);
  var lastRow = table.rows[table.rows.length - 1];

  // Create a new row by cloning the last one
  var newRow = lastRow.cloneNode(true);
  var inputs = newRow.querySelectorAll('input');

  // Clear all but first input
  [].forEach.call(inputs, (input, i) => {if (i) input.value = '';}); 

  // Add the row to the table
  lastRow.parentNode.appendChild(newRow);
}

<form name="books">
  <button type="button" onClick="addRow('dataTable')">  ADD Book </button>
  <table id="dataTable" class="form">
    <tr>
      <td>Date: 
      <td><input type="text" class="form-control" name="date_book[]">
      <td>Pages:
      <td><input type="text" class="form-control" name="book_pages[]">
      <td>Pages total:
      <td><input type="text" class="form-control" name="book_pages_total">
  </table>
</form>