動態添加組合框

我試圖設計一個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

動態添加組合框

回答

相關問題