我想知道是否可以通过单击在 html talbe 中插入行。例如，当我准备如下表格并单击它们时 <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> </tbody> </table>我想要的结果是这样的。我想知道如何通过单击添加任何行<table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> . . . . </tbody> </table>如果有人有意见，请告诉我。
3 回答
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
你可以这样做：
$(document).ready(function() {
$("table").on( "click", "tr", function() {
$("table").append($(this).clone());
});
});
请注意，有必要将事件从页面最初加载时已经存在的父元素传递table到使用 的所有tr元素on()。
ibeautiful
TA贡献1993条经验 获得超5个赞
如果您只想创建新tr元素并在单击时将它们添加到表中，则可以简单地创建一个click事件处理程序来执行此操作。例如：
// Store DOM elements in some variables
const [tbodyEl] = document.querySelector('table').children;
const [trEl] = tbodyEl.children;
// Create an event handler function
const sppendAdditionalRowToTable = e => {
const newTrEl = document.createElement('tr');
for (let i = 0; i < 3; i += 1) {
newTrEl.appendChild(document.createElement('td'));
}
tbodyEl.appendChild(newTrEl);
};
// Call handler function on click event
tbodyEl.addEventListener('click', sppendAdditionalRowToTable);
table {
border-collapse: collapse;
}
td {
border: solid black 1px;
transition-duration: 0.5s;
padding: 5px
}
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
函数式编程
TA贡献1807条经验 获得超9个赞
这有效：
$( document ).ready(function() {
$('#tableID').on( "click", "tr", function() {
$("tbody").append("<tr><td>0</td><td>1</td><td>2</td></tr>");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableID">
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
- 3 回答
- 0 关注
- 72 浏览
添加回答
举报
0/150
提交
取消