如何使用JavaScript添加/删除表行？_Javascript_Html_Dom

如何使用JavaScript添加/删除表行？

javascript html dom

如何使用JavaScript添加/删除表行？,javascript,html,dom,Javascript,Html,Dom,我正在寻找一种使用JavaScript在html表中添加或删除行的简单、有效的技术。（不使用jQuery）我一个月前写了这篇文章……这不是最好的方式 <html> <head> <title> Crap work </title> <script type="text/javascript"> function add_row() { var table

我正在寻找一种使用JavaScript在html表中添加或删除行的简单、有效的技术。（不使用jQuery）

我一个月前写了这篇文章……这不是最好的方式

<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>


垃圾工作
函数add_row（）
{
var table=document.getElementById（'table'）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
var element1=document.createElement（“输入”）；
element1.type=“text”；
单元格1.附加子元素（元素1）；
var cell2=行插入单元格（1）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
第2单元。附加子元素（元素2）；
var cell3=行插入单元格（2）；
cell3.innerHTML='Edit/Delete'；
cell3.setAttribute（“样式”，“显示：无；”）；
var cell4=行插入单元格（3）；
cell4.innerHTML='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（“样式”，“显示：块；”）；
elTableCells[3].setAttribute（“样式”，“显示：无；”）；
}
功能编辑（e）
{
var elTableCells=e.parentNode.parentNode.getElementsByTagName（“td”）；
elTableCells[0]。innerHTML=''；
elTableCells[1]。innerHTML=''；
elTableCells[2].setAttribute（“样式”，“显示：无；”）；
elTableCells[3].setAttribute（“样式”，“显示：块；”）；
}
函数删除_行（e）
{
e、 parentNode.parentNode.parentNode.removeChild（e.parentNode.parentNode）；
}
介子
23
编辑/删除
拯救

编写此类代码的最佳方法是使用编辑器：）（你不需要jQuery；）@Felix King good one dude:-）jQuery厌恶基于什么？你只会得到5倍于代码的结果。@BalusC，有很多理由不使用jQuery，这与你所说的厌恶无关。只有几个：客户端需求、可移植性、对jQuery功能集的最低需求（这里，请记住，要达到“5倍代码”的估计值，必须编写至少120KB的Javascript），对库的依赖（尽管jQuery团队做出了努力）会产生冲突。正如每个问题的答案不一定是“使用jQuery”，对于非jQuery解决方案的每个请求的答案也不是“为什么？”是的。就这么简单。虽然DOM远非完美，但它通常并不那么难。

var theTable = document.getElementById("theTable");
theTable.deleteRow(0);  //0 being first row.