我有一个包含此字段的表单,通过“添加”按钮我可以添加行: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[] 中的日期值?
我希望能解释我的问题。
谢谢
请您参考如下方法:
您应该从有效的 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>