首页html按回车键在表格下面多次插入行中，每次插入行的回车键应用的js原生态代码

html按回车键在表格下面多次插入行中，每次插入行的回车键应用的js原生态代码

时间: 2024-10-10 22:08:01 浏览: 27

在HTML中，如果你想要通过用户按下回车键在表格下方动态添加新行，可以使用JavaScript来实现。以下是基本的原生JavaScript代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态添加表格行</title> </head> <body> <table id="myTable">  <thead> <tr> <th>列1</th> <th>列2</th> </tr> </thead> <tbody> </tbody> </table> <input type="text" id="newRowInput" placeholder="输入内容，然后按Enter键添加行..."> <script> document.getElementById('newRowInput').addEventListener('keyup', function(event) { if (event.keyCode === 13 && event.target.value.trim()) { // 检查是否按下了Enter键且输入框非空 let newRow = document.createElement('tr'); newRow.innerHTML = `<td>${event.target.value}</td>`; // 获取输入的内容并创建新的单元格 event.target.parentNode.appendChild(newRow); // 将新行添加到表格的tbody部分 event.target.value = ""; // 清空输入框 } }); </script> </body> </html> ``` 在这个例子中，当用户在`<input>`元素中输入内容并按Enter键时，会创建一个新的`<tr>`行，并将其添加到当前表格的tbody部分。

阅读全文