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

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

时间: 2024-10-10 19:08:00 浏览: 19

文本框中,回车键触发事件的js代码[多浏览器兼容]

判断是否按下的为回车非常简单: 代码如下: function EnterPress(){ if(event.keyCode == 13){ … } } IE6的onkeypress会接受”回车事件”,而onkeydown不会接受 IE8的onkeypress不会接受”回车事件”,而onkeydown会接受 …不用纠结于此,两个都写上吧代码如下: <input type=”text” onkeypress=”EnterPress()” onkeydown=”EnterPress()” /> 但是,到了FF下面,又会出现矛盾.FF是onkeypress和onkeydown都接受”回车事件

在HTML中，如果你想让用户在输入框内按回车键在表格下方动态插入新的一行，可以使用JavaScript的`event`对象和DOM操作。以下是一个基本的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> #newRow { display: none; } </style> </head> <body> <input type="text" id="inputBox" onkeyup="insertRow(event)"> <table id="myTable" border="1">  </table> <tr id="newRow"> <td></td> <td></td> </tr> <script> function insertRow(event) { if (event.keyCode === 13 && document.getElementById('inputBox').value.trim()) { // 判断是否按下回车键并且输入框有内容 event.preventDefault(); // 阻止默认的提交动作 var newRow = document.getElementById('newRow'); newRow.style.display = 'block'; // 显示新行 var inputContent = document.getElementById('inputBox').value; var newRowCells = newRow.getElementsByTagName('td'); for (var i = 0; i < newRowCells.length; i++) { newRowCells[i].innerText = inputContent[i]; // 将用户输入填充到新行 } document.getElementById('inputBox').value = ""; // 清空输入框 newRow.parentNode.insertBefore(newRow, newRow.parentNode.lastChild); // 在最后一行之后插入新行 } } </script> </body> </html> ``` 在这个例子中，当你在`inputBox`中输入并按下回车键时，会在表格末尾插入一行，每列的内容对应于输入框中的字符。注意，此示例假设用户输入的长度与新行的列数相匹配。

阅读全文