我們如何動態刪除使用javascript的html表格行。 我們在每一行都有一個複選框。使用複選框選中該行的單擊刪除按鈕將被刪除。如 document.getElementById(j).innerHTML ='';動態刪除表格行使用複選框和javascript
3
A
回答
4
刪除元素最好使用DOM節點函數完成,如removeChild
,而不是innerHTML
-黑客。例如:
function removeAllRowsContainingCheckedCheckbox(table) {
for (var rowi= table.rows.length; rowi-->0;) {
var row= table.rows[rowi];
var inputs= row.getElementsByTagName('input');
for (var inputi= inputs.length; inputi-->0;) {
var input= inputs[inputi];
if (input.type==='checkbox' && input.checked) {
row.parentNode.removeChild(row);
break;
}
}
}
}
2
下面是關於如何可以這樣做一個小的樣機:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mockup</title>
<script type="text/javascript">
function killRow(src) {
var dRow = src.parentElement.parentElement;
document.all("table").deleteRow(dRow.rowIndex);
}
</script>
</head>
<body>
<form action="something.html">
<table id="table">
<tr>
<td><input type='checkbox' onclick='killRow(this);'>Click me!</td>
<td>Demodata 1</td>
</tr>
<tr>
<td><input type='checkbox' onclick='killRow(this);'>Click me!</td>
<td>Demodata 2</td>
</tr>
</table>
</form>
</body>
</html>
鍵入這是一個JScript函數,然後可以從任何行中有使用。它甚至可能更普遍化。當點擊複選框時,該函數被調用。
我寧可不使用innerHTML,我更喜歡DOM節點(這裏是parentElement
)。
2
這是一個通過檢查複選框的值來執行刪除行所需操作的功能。在刪除按鈕的onclick事件中調用此函數(包含註釋)。希望這有助於:)
function removeSampleRow(id) {
/***We get the table object based on given id ***/
var objTable = document.getElementById(id);
/*** Get the current row length ***/
var iRow = objTable.rows.length;
/*** Initial row counter ***/
var counter = 0;
/*** Performing a loop inside the table ***/
if (objTable.rows.length > 1) {
for (var i = 0; i < objTable.rows.length; i++) {
/*** Get checkbox object ***/
var chk = objTable.rows[i].cells[0].childNodes[0];
if (chk.checked) {
/*** if checked we del ***/
objTable.deleteRow(i);
iRow--;
i--;
counter = counter + 1;
}
}
/*** Alert user if there is now row is selected to be deleted ***/
if (counter == 0) {
alert("Please select the row that you want to delete.");
}
}else{
/*** Alert user if there are no rows being added ***/
alert("There are no rows being added");
}
}
相關問題
- 1. 用Javascript中的複選框刪除表格行
- 2. 使用複選框從表格刪除多個記錄(行)
- 3. 動態添加和刪除表格行
- 4. 動態添加和刪除表格行
- 5. C#動態刪除複選框
- 6. 使用複選框刪除多行
- 7. 使用jquery/javascript動態添加/刪除表中的行使用jquery/javascript動態添加/刪除行
- 8. HTML,Javascript-如何刪除在複選框中選中的表格的行
- 9. 刪除複選框檢查表的行
- 10. 使用javascript刪除動態創建的組合框選項
- 11. JavaScript - 使用複選框添加/刪除/編輯行
- 12. 使用Javascript刪除HTML表格行
- 13. 如何使用Javascript刪除表格行
- 14. vba刪除該行中所有使用的行和複選框?
- 15. 如何創建表格行選擇gridview複選框使用javascript
- 16. 使用JavaScript檢索HTML表格中的複選框狀態
- 17. 我如何刪除表格動態行?
- 18. 使用複選框從數據庫表中刪除一行
- 19. PHP使用複選框刪除多個錶行
- 20. DataGridview和MySQL使用複選框刪除行
- 21. 如何刪除使用複選框通過listview生成的多行表格
- 22. 動態追加和刪除表格行不起作用
- 23. C#通過複選框刪除動態文本框
- 24. extjs複選框網格刪除rails
- 25. 刪除複選框之間的空格
- 26. 使用Javascript動態選擇多個複選框選擇
- 27. 使用javascript從表中動態刪除行
- 28. 如何動態地從下拉列表中添加和刪除複選框
- 29. mootools使用HtmlTable動態添加/刪除表格行
- 30. 使用ajax刪除動態創建的表格行