动态添加组合框

我试图设计一个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脚本上做我的作业:)

来源

2009-12-17 Sandeep

你被允许使用jQuery？ – SLaks 2009-12-17 01:39:39

只需在javascript上做一些功课:) – Sandeep 2009-12-17 13:03:38

这应该做的伎俩：

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);

来源

2009-12-17 01:44:14 Treby

完美的工作！谢谢你的建议！ – Sandeep 2009-12-17 04:07:04

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

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

所以问题是什么元素在那里？在我的例子中有三个选择和两个选项。所以在你的JavaScript中，你如何创建元素？

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

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

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

也许？

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

element4.appendChild(option1);

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

来源

2009-12-17 01:39:22

需要innerHTML！无论如何，真棒建议...谢谢 – Sandeep 2009-12-17 04:07:38

为什么不尝试

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);

来源

2009-12-17 01:49:20 Patrick

这工作，但它没有显示菜单中的名称.. – Sandeep 2009-12-17 13:07:13

动态添加组合框

回答

相关问题