我正在尋找一種簡單,有效的技術,使用JavaScript在html表格中添加或刪除一行。 (沒有使用jQuery)如何使用JavaScript添加/刪除表格行?
2
A
回答
0
我寫這在一個月前...它不寫這樣的代碼將使用編輯器的最佳方式
<html>
<head>
<title>
Crap work
</title>
<script type="text/javascript">
function add_row()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<span onClick="save(this)">Save</span>';
}
function save(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML=elTableCells[0].firstChild.value;
elTableCells[1].innerHTML=elTableCells[1].firstChild.value;
elTableCells[2].setAttribute("style", "display:block;");
elTableCells[3].setAttribute("style", "display:none;");
}
function edit(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML='<input type="text" value="'+elTableCells[0].innerHTML+'">';
elTableCells[1].innerHTML='<input type="text" value="'+elTableCells[1].innerHTML+'">';
elTableCells[2].setAttribute("style", "display:none;");
elTableCells[3].setAttribute("style", "display:block;");
}
function delete_row(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}
</script>
</head>
<body >
<div id="display">
<table id='table'>
<tr id='id'>
<td>
Piemesons
</td>
<td>
23
</td>
<td >
<span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>
</td>
<td style="display:none;">
<span onClick="save(this)">Save</span>
</td>
</tr>
</table>
<input type="button" value="Add new row" onClick="add_row();" />
</div>
</body>
4
var theTable = document.getElementById("theTable");
theTable.deleteRow(0); //0 being first row.
+0
是的。就這麼簡單。雖然DOM遠非完美,但通常並不那麼困難。 – 2010-06-20 21:22:02
相關問題
- 1. 如何使用Javascript刪除表格行
- 2. 我如何使用表格添加和刪除javascript字符串
- 3. 使用jquery/javascript動態添加/刪除表中的行使用jquery/javascript動態添加/刪除行
- 4. 使用Javascript刪除HTML表格行
- 5. JavaScript dyanmic表添加/刪除行
- 6. jQuery - 添加/刪除表格行
- 7. 刪除添加的html表格行
- 8. jquery添加和刪除表格行
- 9. 動態添加和刪除表格行
- 10. 動態添加和刪除表格行
- 11. Javascript添加刪除行發送表單而不是添加行
- 12. 如何使用Javascript刪除某一行時更新表格
- 13. 如何正確地使用javascript刪除表格行?
- 14. 如何使用javascript刪除表格中的特定行?
- 15. 使用JavaScript添加和刪除表中的行
- 16. 使用Jquery編輯和刪除新添加的表格行
- 17. mootools使用HtmlTable動態添加/刪除表格行
- 18. 使用Jquery動態添加/刪除表格行
- 19. 嘗試使用jQuery添加和刪除表格行
- 20. 如何使用刪除按鈕刪除表格行
- 21. 如何在表格中刪除或添加2行
- 22. 如何刪除HTML表格的最後td並添加新行?
- 23. 如何使用jquery添加刪除和添加按鈕的行?
- 24. 如何使用添加和刪除按鈕動態添加表格以及動態添加行?
- 25. 使用javascript添加和刪除框
- 26. 添加,使用JavaScript刪除輸入框
- 27. 使用javascript添加刪除html元素
- 28. 如何使用javascript將行添加到表格的開頭
- 29. Javascript添加表格行
- 30. 如何刪除表格行id用jquery?
的最佳方式:)(並且你不需要那個jQuery;)) – 2010-06-20 20:22:22
@Felix King好一個老兄:-) – 2010-06-20 20:24:08
jQuery厭惡的基礎在哪裏?你最終只能得到代碼的5倍。 – BalusC 2010-06-20 20:31:03