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

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

3 голосов
/ 17 декабря 2009

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

Ответы [ 3 ]

1 голос
/ 17 декабря 2009

Это должно сработать: 

 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);
1 голос
/ 17 декабря 2009

почему бы не попробовать 

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);
1 голос
/ 17 декабря 2009

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

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

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

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

Это создает выбор. Так как бы вы создали опцию? 

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

возможно

как бы вы добавили опцию в select? Так же, как вы добавляете выбор в ячейку. 

   element4.appendChild(option1);

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

...