我想知道是否可以通過(guò)單擊在 html talbe 中插入行。例如，當(dāng)我準(zhǔn)備如下表格并單擊它們時(shí) <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> </tbody> </table>我想要的結(jié)果是這樣的。我想知道如何通過(guò)單擊添加任何行<table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> . . . . </tbody> </table>如果有人有意見(jiàn)，請(qǐng)告訴我。
3 回答
泛舟湖上清波郎朗
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個(gè)贊
你可以這樣做：
$(document).ready(function() {
$("table").on( "click", "tr", function() {
$("table").append($(this).clone());
});
});
請(qǐng)注意，有必要將事件從頁(yè)面最初加載時(shí)已經(jīng)存在的父元素傳遞table到使用 的所有tr元素on()。
ibeautiful
TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果您只想創(chuàng)建新tr元素并在單擊時(shí)將它們添加到表中，則可以簡(jiǎn)單地創(chuàng)建一個(gè)click事件處理程序來(lái)執(zhí)行此操作。例如：
// 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>
函數(shù)式編程
TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊
這有效：
$( 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 關(guān)注
- 172 瀏覽
添加回答
舉報(bào)
0/150
提交
取消