我想知道是否可以通過單擊在 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條經驗 獲得超6個贊
如果您只想創建新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 關注
- 177 瀏覽
添加回答
舉報
0/150
提交
取消