Question

我想在表格的每一行添加一个select（下拉列表）。该表是使用Javascript创建的，并使用JQuery从xml文件导入动态内容。我成功导入了所有内容，但下拉列表仅显示在最后一行。如果你能协助我在每一行都有下拉，我将不胜感激。

以下是仅带空白选择的代码提取（导入的内容存储在这些元素中）。所有输出（如“行”）仅用于测试目的。 “Numrows”也用于测试目的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
     <meta charset="utf-8" >

    <title>table select test</title>
</head>
<body>

    <table id="scrolltable">
    </table>

<script type="text/javascript">
    var tabbody = document.getElementById("scrolltable");

    var types = document.createElement("select");
    var units = document.createElement("select");

    parseTable(3, types, "row ", units);

    function parseTable(numrows, types, limits, units) {
        for (i = 0; i < numrows; i++) {
            var row = document.createElement("tr");
            var cell1 = document.createElement("td");
            cell1.style.width="300px";
            cell1.appendChild(types);
            row.appendChild(cell1);
            var cell2 = document.createElement("td");
            cell2.innerHTML = limits + i;
            cell2.style.width = "100px";
            row.appendChild(cell2);
            var cell3 = document.createElement("td");
            cell3.appendChild(units);
            row.appendChild(cell3);
            tabbody.appendChild(row);
        }
    }
</script>
</body>
</html>

Answer 1

如果没有最低限度的例子，可能很难确定问题，但我的猜测是：

您只在循环之前创建类型和单位元素，因此您反复追加相同的对象，并且每次将其中一个追加到单元格时，您将其从原始单元格中取出并放入新的一个。那是什么＆＃34; appendChild＆＃34;它没有克隆元素，它使用相同的元素（http://www.w3schools.com/jsref/met_node_appendchild.asp）。

如果你在for的每一步中创建一个新的select元素，你应该没问题=）

Answer 2

types和units定义一次，因此它们是单个元素。所以他们被转移到你上次称为appendChild的地方。如果您想了解会发生什么，请在结束for循环之前添加alert('');，并在每行中查看它。

如果要在每一行中添加它，那么每次尝试都需要新的实例：

function parseTable(numrows, types, limits, units) {
    for (i = 0; i < numrows; i++) {
        var row = document.createElement("tr");
        var cell1 = document.createElement("td");
        cell1.style.width="300px";
        types = document.createElement("select");
        cell1.appendChild(types);
        row.appendChild(cell1);
        var cell2 = document.createElement("td");
        cell2.innerHTML = limits + i;
        cell2.style.width = "100px";
        row.appendChild(cell2);
        var cell3 = document.createElement("td");
        units = document.createElement("select");
        cell3.appendChild(units);
        row.appendChild(cell3);
        tabbody.appendChild(row);
    }
}

Javascript在表格单元格中选择

2 个答案: