动态添加组合框答案

【问题标题】：Adding Combo-box dynamically动态添加组合框
【发布时间】：2026-01-23 04:05:01
【问题描述】：

我正在尝试用 HTML 设计一个表格，当我单击“添加行”按钮时可以添加一行，如果我打算删除它，删除添加的行也是如此。我编写了一个用于添加复选框和文本的 javascript。但我什至想要其中的组合框，我被困在中间。你们能弄清楚并让我知道该怎么做吗？这是我的 JS 文件。

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        cell3.appendChild(element2);

        var cell4 = row.insertCell(3);
        var element3 = document.createElement("input");
        element3.type = "text";
        cell4.appendChild(element3);

        var cell5 = row.insertCell(4);
        //This is where the PROBLEM is!!
                    var element4 = document.createElement("select");
        element4.type = "option";
        cell5.appendChild(element4);

    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }

        }
        }catch(e) {
            alert(e);
        }
    }

// JavaScript 文档

注意：请不要建议 SERVER_SIDE SCRIPTING。我只是在 Java Script 上做功课:)

【问题讨论】：

你可以使用jQuery吗？
只是一些关于javascript的功课:)

标签： javascript html dynamic-data

【解决方案1】：

这应该可以解决问题：

 var cell5 = row.insertCell(4);
 //This is where the SOLUTION is!!
 var element4 = document.createElement("select");
 var option1 = document.createElement("option");
 option1.value="1";
 option1.innerHTML="sample1";
 element4.appendChild(option1);
 var option2 = document.createElement("option");
 option2.value="2";
 option2.innerHTML="sample2";               
 element4.appendChild(option2);
  cell5.appendChild(element4);

【讨论】：

完美运行！非常感谢您的建议！

【解决方案2】：

试着想想你希望得到的结果。在这种情况下，您希望 HTML 看起来像这样：

    <select>
       <option></option>
       <option></option>
    </select>

所以问题是有哪些元素？我的示例中有三个，一个选择和两个选项。那么在你的 JavaScript 中你是如何创建元素的呢？

 var element4 = document.createElement("select");

这会创建一个选择。那么你将如何创建一个选项呢？

   var option1 = document.createElement("option");

也许？

如何将选项添加到选择中？与将选择添加到单元格的方式相同。

   element4.appendChild(option1);

然后创建您需要的其他选项并将选择添加到单元格中。

【讨论】：

【解决方案3】：

为什么不试试

var sel=document.createElement("select");

// repeat this for each option you have

var opt=document.createElement("option");
opt.value="my option value";
opt.text="my option to be displayed";
sel.appendChild(opt);

// end repeat

cell5.appendChild(sel);

【讨论】：