使用隐藏类型和javascript删除html表中的行_Javascript_Dom_Delete Row

使用隐藏类型和javascript删除html表中的行

javascript dom

使用隐藏类型和javascript删除html表中的行,javascript,dom,delete-row,Javascript,Dom,Delete Row,我有一个使用servlet类构造的带有HTML的表。当尝试使用javascript函数删除此表中的一行时，我必须首先将不同的id放置在不同的元素中。我喜欢这样的隐藏类型： retour.append("<td>"); retour.append("<input type=\"hidden\" id=\"id_"+nomTab+"_"+compteur+"\" value=\""+object.getIdDailyTimeSheet()+"\"/>"); retour.

我有一个使用servlet类构造的带有HTML的表。当尝试使用javascript函数删除此表中的一行时，我必须首先将不同的id放置在不同的元素中。我喜欢这样的隐藏类型：

retour.append("<td>");
retour.append("<input type=\"hidden\" id=\"id_"+nomTab+"_"+compteur+"\"  value=\""+object.getIdDailyTimeSheet()+"\"/>");
retour.append("<button id=\"del\" name=\"del\"  type=\"button\" onClick=DeleteARow('+id_"+nomTab+"_"+compteur+"')>");
retour.append("<img src=icon_delete.gif />");
retour.append("</button>");
retour.append("</td>");

retour.append（“”）；
retour.追加（“”）；
retour.追加（“”）；
retour.追加（“”）；
retour.追加（“”）；
retour.追加（“”）；

正如您所见，每个元素都有一个删除按钮。我想知道的是如何删除一行

思考。

DeleteRow javascript方法应该有代码在Table元素中循环，标识要删除的行，然后调用document对象的delete方法。

DeleteRow javascript方法应该有代码在Table元素中循环，标识要删除的行，然后调用document对象的delete方法

function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}

您应该签出此dom页面：

希望这有帮助

function DeleteARow(id) {
    var row = document.getElementById(id);
    if ( row ) {
        row.parentNode.removeChild(row);
    }
}

您应该签出此dom页面：

希望这有帮助。

我不明白您为什么要使用

。相反，您应该使用一些DOM脚本。（或jQuery）

function DeleteARow(id) {
    var row = document.getElementById(id);
    if ( row ) {
        row.parentNode.removeChild(row);
    }
}

下面是一个使用DOM脚本的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Delete a Row Example</title>
    <script type="text/javascript">
//<![CDATA[
        window.onload = function() {
            var table = document.getElementById("the-table");
            var buttons = table.getElementsByTagName("input"); // all the <input /> elements which were in the table
            for(var i=0; i<buttons.length; i++) { // loop all over the <input /> elements in the table
                if(buttons[i].name=="delete-this-row") { // if they are marked as "delete this row" inputs...
                    buttons[i].onclick = function() { // give them onclick even handlers
                        var buttonCell = this.parentNode; // now buttonCell is the <td> which contains the <input />
                        var deleteThisRow = buttonCell.parentNode; // now deleteThisRow is the row we want to delete
                        deleteThisRow.parentNode.removeChild(deleteThisRow);
                    }
                }
            }
        }
//]]>
    </script>
</head>
<body>
    <table id="the-table">
        <tbody>
            <tr>
                <td>0,0</td>
                <td>1,0</td>
                <td>2,0</td>
                <td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
            </tr>
            <tr>
                <td>0,1</td>
                <td>1,1</td>
                <td>2,1</td>
                <td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
            </tr>
            <tr>
                <td>0,2</td>
                <td>1,2</td>
                <td>2,2</td>
                <td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>


删除一行示例
//表中的元素
对于（var i=0；i
0,0
1,0
2,0
0,1
1,1
2,1
0,2
1,2
2,2

我在这里使用的想法不是在行上使用标识符，而是使用按钮的位置来确定要删除的行。您可以在其中删除该行

由于我在javascript中定义了

onclick

事件处理程序（不是在

onclick

属性中），所以我使用的函数可以使用

this

关键字访问单击的元素。从那里，我可以开始爬升

this.parendNode

元素

您应该能够使用

元素执行与我使用

元素相同的操作

或者，您也可以使用

deleteRow（…）