单击以在表格中添加新行删除输入的数据
[英]Clicking to add new row in table removing entered data
问题描述
I have written code that adds a new row in the table when the button is clicked.
我编写了在单击按钮时在表中添加新行的代码。 If I enter values and then click the button, the data is deleted.如果我输入值然后单击按钮，则数据将被删除。 Why?为什么？
document.getElementById('add').addEventListener('click', function(){ document.querySelector('table tbody').innerHTML += document.querySelector('table tbody tr').innerHTML; });
<button id="add">Add</button> <table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> </thead> <tbody> <tr> <td><input type="number" placeholder="test" min="1"></td> <td><input type="number" placeholder="test" min="1"></td> <td><input type="number" placeholder="test" min="1"></td> <td><input type="number" placeholder="test" min="1"></td> <td><input type="checkbox" checked></td> </tr> </tbody> </table>
1 个解决方案
解决方案1
1 已采纳 2021-03-10 16:57:39
You might want to consider using the append() method.您可能需要考虑使用 append() 方法。
<body>
<button id="add">Add</button>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td><input type="number" placeholder="test" min="1"></td>
<td><input type="number" placeholder="test" min="1"></td>
<td><input type="number" placeholder="test" min="1"></td>
<td><input type="number" placeholder="test" min="1"></td>
<td><input type="checkbox" checked></td>
</tr>
</tbody>
</table>
<script>
document.getElementById('add').addEventListener('click', function() {
row = document.createElement('tr');
row.innerHTML = '<td><input type="number" placeholder="test" min="1"></td><td><input type="number" placeholder="test" min="1"></td><td><input type="number" placeholder="test" min="1"></td><td><input type="number" placeholder="test" min="1"></td><td><input type="checkbox" checked></td>'
document.getElementById('tableBody').append(row);
});
</script>
</body>
By doing this, you can add on to the existing content without overwriting it's content.通过这样做，您可以添加到现有内容而不覆盖其内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
通过单击关闭图标从表中删除行 - Removing row from table by clicking close icon
如何捕获输入表行组件的数据 - How to capture data entered into table row component
如何通过单击多选来向表中添加行 - How to add a row to a table from clicking multiselect
如何通过单击在表格上添加额外的行 - How to add extra row on a table by clicking
jQuery在将数据输入到数量字段时添加新表行 - jQuery add new table row upon entering data into quantity field
如何在 JavaScript 中将“data-href”添加到新表行 - How to add 'data-href' to new table row in JavaScript
单击表行返回错误的数据 - Clicking on table row returning the incorrect data
点击按钮删除表格和数据中的一行 Javascript - Delete a row in the table and data by clicking the button Javascript
如何添加新表行？ - How to add new table row?
onclick 在表中添加新行 - onclick on the add the new row in the table
相关标签