首页js将输入框内的数据放入表格

js将输入框内的数据放入表格

时间: 2024-03-07 20:46:31 浏览: 344

可以通过以下步骤将输入框内的数据放入表格： 1. 获取输入框的数据。可以使用 `document.getElementById` 方法获取输入框的 DOM 元素，然后使用 `value` 属性获取输入框的值。 2. 获取表格对象。可以使用 `document.getElementById` 方法获取表格的 DOM 元素，然后使用 `insertRow` 方法创建新的行。 3. 将数据添加到表格中。可以使用 `insertCell` 方法将数据添加到行中的单元格中，然后使用 `innerHTML` 属性设置单元格的值。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>添加数据到表格</title> </head> <body> <input type="text" id="inputData"> <button onclick="addData()">添加数据</button> <table id="myTable" border="1"> <tr> <th>序号</th> <th>数据</th> </tr> </table> <script> function addData() { // 获取输入框的数据 var data = document.getElementById("inputData").value; // 获取表格对象并创建新的行 var table = document.getElementById("myTable"); var row = table.insertRow(); // 将数据添加到行中的单元格中 var cell1 = row.insertCell(0); cell1.innerHTML = table.rows.length - 1; var cell2 = row.insertCell(1); cell2.innerHTML = data; } </script> </body> </html> ``` 这个示例代码中，当用户在输入框中输入数据并点击“添加数据”按钮时，就会将数据添加到表格中。每一行中的第一列显示序号，第二列显示输入框中的数据。

阅读全文