gpt4 book ai didi

当在html表最后一行中按Enter键时,javascript插入与第一行相同的新行

转载 作者:行者123 更新时间:2023-11-29 10:55:10 25 4
gpt4 key购买 nike

我想在用户按下键盘上的回车键时在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com