我想在用户按下键盘上的回车键时在 html 表中插入新行。一开始我已经在创建表时添加了第一个 tr。在此 tr 中，首先 td 包含 html 下拉列表($select_chooseitem)，其中包含来自数据库的数据。第二列是文本框。我想使用 javascript 获取第一个 tr 元素集并基于它创建新行。 tr 元素集就像:
<tr>
<td>first col</td>
<td>second col</td>
</tr>
我不想声明新的 tr 元素集。但是，想要从表中检索第一个 tr 元素集。这可能吗？
$row_html ='<tr>
<td>'.$select_chooseitem.'</td>
<td><input type="text" name="order"></td>
</tr>';
$html_complete='<!DOCTYPE html>
<html lang="en">
<head>
<script>
$(function () {
// Change the selector if needed
var $table = $(".mt-table-edit");
//addNewRow();
function addNewRow() {
//get row template. We must use html() for new instance other event handler will get attached to last row
//var $tr = $("<tr><td><input/></td><td><input/></td><td><input/></td><td><input/></td></tr>");
var $tr = $("<tr><td><input/></td><td><input/></td></tr>");
$tr.find("td").eq($tr.find("td").length - 1).keyup(function (e) {
if (event.keyCode === 13) {
addNewRow();
}
});
// add template after the last row
$table.find("tbody:last-child").append($tr);
// focus on firt input of newly added row
$tr.find("td:first input").focus();
}
});
</script>
</head>
<body>
<table class="mt-table-edit">
'.$row_html.'
</table>
</body>
</html>';
echo $html_complete;
//echo $query_tbltemplateitems;
由于第一个不起作用，我尝试的其他方法是在 javascript 中获取 $select_chooseitem 以创建 tr 元素集。我尝试通过 addNewRow('.$select_chooseitem.'); 在 js 中访问 php 变量($select_chooseitem)，但没有用。如何从 js 访问 php 变量值的正确方法？
<script>
$(function () {
var $table = $(".mt-table-edit");
var $row = $(".mt-table-edit").children("tr:first");
addNewRow('.$select_chooseitem.');
function addNewRow(var)
{
//get row template. We must use html() for new instance other event handler will get attached to last row
//var $tr = $("<tr><td><input/></td><td><input/></td><td><input/></td><td><input/></td></tr>");
var $tr = $("<tr><td>var</td><td><input/></td></tr>");
$tr.find("td").eq($tr.find("td").length - 1).keyup(function (e) {
if (event.keyCode === 13)
{
addNewRow(var);
}
});
$table.find("tbody:last-child").append($tr);
$tr.find("td:first input").focus();
}
});
</script>
我尝试在 js 中声明变量并尝试在 html 头部的 js 中访问。也不成功。 示例:
<?php
$select_chooseitem='<select>'.$option_list.'</select>';
?>
<script>
var select_chooseitem=<?php echo $select_chooseitem;?>;
</script>
提前致谢。
最佳答案
请尝试下面的代码片段。
$(document).on( 'keyup', '.name', function(){
if (event.which == 13 && $(this).closest("tr").is(":last-child")) {
var $tblbody = $('#mytable').find("tbody"),
$tbltrlast = $tblbody.find("tr:last"),
$trnew = $tbltrlast.clone();
$tbltrlast.after($trnew);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='mytable'>
<tbody>
<tr>
<td><input type='text' name='name' class='name' value='John Doe'></td>
</tr>
</tbody>
</table>关于当在html表最后一行中按Enter键时，javascript插入与第一行相同的新行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59064485/