1

我有一个从用户指定的查询动态构建到数据库的表，我想为用户提供从生成的 HTML 表中编辑数据的选项。当用户双击包含他们要编辑的数据的行时，我会在其下方出现一个新行，并带有文本框供他们提交新值。现在，当用户单击双击两行时，两行文本框都保留在表中，我想在第二行出现之前删除第一行。我的问题是，找到包含文本框的表格行以便我可以使用 JavaScript 的deleteRow()函数有什么好处？

我正在生成这样的行：

function editRow(row) {
    var table = document.getElementById("data");
    var newRow = table.insertRow(row.rowIndex + 1);
    var cell;

    for (var i = 0; i < row.childNodes.length; i++) {
        cell = newRow.insertCell(i);
        textBox = document.createElement("input");
        textBox.type = "text";
        textBox.placeholder = row.childNodes[i].innerHTML;
        textBox.style.textAlign = "center";
        textBox.style.width = "90%";
        cell.appendChild(textBox);
    }
}

我能想到的唯一方法是（伪代码）：

for all table rows 
    if row.childNodes.innerHTML contains 'input' 
        deleteRow(index)

谢谢您的帮助

4

3 回答 3

1

你可以使用jQuery。假设row是一个 DOM 元素，这应该可以工作：

var textBoxes = $("input:text", row);
于 2012-11-29T17:40:31.803 回答
0

我想最简单的选择是将创建的行添加到数组中。这样，您只需删除数组中的行，而不是遍历整个表。

于 2012-11-29T17:36:52.987 回答
0

我最终做了以下事情：

function editRow(row) {
    var table = document.getElementById("data");
    clearExistingTextBoxes(table);
    ...
}

function clearExistingTextBoxes(table) {
    var tBoxRow = table.getElementsByTagName("input");
    if (tBoxRow.length > 0) {
    tBoxRow = tBoxRow[0].parentNode.parentNode;
    table.deleteRow(tBoxRow.rowIndex);
    }
}

假设我一次只清理一排。

于 2012-11-29T19:31:22.560 回答