Question

我试图让脚本删除表格行。

var i = 1;

function addURL() {
    var tr = document.createElement('tr');
    tr.setAttribute("id", "url_row_" + ++i);
    var td = tr.appendChild(document.createElement('td'));
    td.style.valign = 'middle';

    td = tr.appendChild(document.createElement('td'));
    var input = td.appendChild(document.createElement('input'));
    input.name = 'url[]';
    input.type = 'text';
    input.size = '40'
    var node = document.getElementById('myTable').tBodies[0];
    node.insertBefore(tr, node.children[3]);

    var link = document.createElement("a");
    link.setAttribute("href", ""); 
    link.setAttribute("style", "text-decoration: none;");
    link.setAttribute("onClick", "removeURL('');return false;");
    td = tr.appendChild(document.createElement('td'));
    td=td.appendChild(link)
    td.appendChild(document.createTextNode('-'));
}

function removeURL(divNum) {
    var d = document.getElementById('myTable').tBodies[0];
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
}

这可以产生尽可能多的url_row_（数字）文本字段。我只是不知道如何删除这些行。

我知道

link.setAttribute("onClick", "removeURL('url_row_2');return false;");

会删除url_row_2，但是我可以在url_row_2中添加什么内容来获取该行的id或者执行此操作的正确代码是什么？

Answer 1

要这样做，您可以使用字符串连接将i连接到处理程序字符串中以定位给定的tr。

link.setAttribute("onclick", "removeURL('url_row_" + i + "');return false;");

Answer 2

不要将setAttribute用于事件侦听器。请查看Introduction to event handling at quirksmode.org，尤其是simple event registration model。此外，您只需使用事件对象中的信息来标识要删除的行：

function clickHandler(event) {
    var anchor = this; // == event.targetElement
    var tr = anchor.parentNode.parentNode;
    tr.parentNode.removeChild(tr);
    event.preventDefault(); // do not follow the href
}

function addURL() {
    …

    var link = document.createElement("a");
    link.setAttribute("href", "#"); 
    link.setAttribute("style", "text-decoration: none;");
    link.onclick = clickHandler;
    td = tr.appendChild(document.createElement('td'));
    td.appendChild(link)
    link.appendChild(document.createTextNode('-'));
}

Javascript删除特定行

2 个答案: