Динамическое добавление Combo-box

Question

Я пытаюсь создать таблицу в 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 Document

Примечание: Пожалуйста, не предложить SERVER_SIDE скриптовый. Я просто делаю свою домашнюю работу на Java Script :)

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

Answer 2

Постарайтесь подумать о том, что вы хотите получить. В этом случае вы хотите иметь HTML-код, который выглядит так:

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

Итак, вопрос в том, какие элементы существуют? В моем примере три, выбор и два варианта. Итак, в вашем JavaScript, как вы создаете элементы?

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

Это создает выбор. Итак, как бы вы создали вариант?

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

возможно?

Как вы можете добавить опцию к выбору? То же самое можно добавить в ячейку.

element4.appendChild(option1); 

затем создайте другие параметры, которые вам нужны, и добавьте выделение в ячейку.

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