Question

我创建了一个非常基本的表格和复选框布局。我在表中有八个文本框和八行。我只是尝试在复选框检查中添加行，并在取消选中时删除。

所以，我正在使用两个函数。

function show(input){
    var tbody = document.getElementById("tbody");
    if(document.contains(document.getElementById("tr"+input)))
    {
         hide('tr'+input);
    }
    if(!document.contains(document.getElementById("tr"+input)))
    {
         tbody.appendChild(getRow(input));
    }
}

function hide(input){
    if(document.contains(document.getElementById(input)))
    {
        var child = document.getElementById(input);
        child.parentNode.removeChild(child);
        child.parentNode.removeChild(child);
    }
}

在hide函数中，如果我只使用一个removeChild语句，则它不起作用。使用两个时，控制台会报告错误，但它运行正常。

如果有人知道原因，请告诉我，因为在代码中留下错误是不道德的。

编辑＃1：JsFiddle

Answer 1

你的问题是这个功能：

function show(input) {
    var tbody = document.getElementById("tbody");
    if (document.contains(document.getElementById("tr" + input))) {
        hide('tr' + input);
    }
    if (!document.contains(document.getElementById("tr" + input))) {
        tbody.appendChild(getRow(input));
    }
}

首先，检查节点是否存在，如果存在，则将其隐藏。接下来，您始终检查节点是否不，如果是，则添加它。刚刚隐藏节点时，第二次检查将为true（因为您刚刚删除了节点），并再次添加节点。

如此改写：

function show(input) {
    var tbody = document.getElementById("tbody");
    if (document.contains(document.getElementById("tr" + input))) {
        hide('tr' + input);
    } else if (!document.contains(document.getElementById("tr" + input))) {
        tbody.appendChild(getRow(input));
    }
}

fiddle

Answer 2

似乎立即重新绘制元素存在问题，这是一种对我有用的脏方法

 var child = document.getElementById(input);
 setTimeout(function(){
      child.parentNode.deleteRow(child.rowIndex - 1);    
 }, 1);

在附加/删除表元素时使用表特定方法是安全的。

node.removeChild（child）的奇怪行为

2 个答案: