Блог

Главная - Вопросы по программированию - Возникли проблемы при создании поля со списком с использованием javascript

Возникли проблемы при создании поля со списком с использованием javascript

#javascript #html #css #spring #model-view-controller

#javascript #HTML #css #весна #модель-представление-контроллер

Вопрос:

Мне нужна помощь в создании поля со списком в моем js-файле для приложения расписания? Итак, в расписании есть кнопка добавить строку, которая создаст новую строку. Я хотел бы иметь выпадающий список ввод для первого столбца в строке, в котором будут перечислены клиенты. Изначально в приложении расписания нет строки, пользователю необходимо будет добавить строку для отправки расписания. После нажатия кнопки добавить строку будет создана строка, в которой я хотел бы иметь выпадающий список в разделе «Код проекта», в котором перечислены внутренние приложения расписания наших клиентов. JS-код, который я использовал для создания таблицы, выглядит следующим образом:

введите описание изображения здесь

 var arrHead = new Array();  // array for header.
    arrHead = ['', 'Project Code', 'Project Description', 'Billable Hours'];

    // first create TABLE structure with the headers. 
    function createTable() {
        var empTable = document.createElement('table');
        empTable.setAttribute('id', 'empTable'); // table id.

        var tr = empTable.insertRow(-1);
        for (var h = 0; h < arrHead.length; h  ) {
            var th = document.createElement('th'); // create table headers
            th.innerHTML = arrHead[h];
            tr.appendChild(th);
        }

        var div = document.getElementById('cont');
        div.appendChild(empTable);  // add the TABLE to the container.
    }

    //Creating a drop-downlist for Project Code

    // now, add a new to the TABLE.
    function addRow() {
        var empTab = document.getElementById('empTable');

        var rowCnt = empTab.rows.length;   // table row count.
        var tr = empTab.insertRow(rowCnt); // the table row.
        tr = empTab.insertRow(rowCnt);

        for (var c = 0; c < arrHead.length; c  ) {
            var td = document.createElement('td'); // table definition.
            td = tr.insertCell(c);

            if (c == 0) {      // the first column.
                // add a button in every new row in the first column.
                var button = document.createElement('input');

                // set input attributes.
                button.setAttribute('type', 'button');
                button.setAttribute('value', 'Remove');

                // add button's 'onclick' event.
                button.setAttribute('onclick', 'removeRow(this)');

                td.appendChild(button);
            }
            else {
                // 2nd, 3rd and 4th column, will have textbox.
                var ele = document.createElement('input'); //I would like create a combo-box for 2nd Column
                ele.setAttribute('type', 'text');
                ele.setAttribute('value', '');
                td.appendChild(ele);

            }
        }
    }

    // delete TABLE row function.
    function removeRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // button -> td -> tr.
    }

    // function to extract and submit table data.
    function submit() {
        var myTab = document.getElementById('empTable');
        var arrValues = new Array();

        // loop through each row of the table.
        for (row = 1; row < myTab.rows.length - 1; row  ) {
            // loop through each cell in a row.
            for (c = 0; c < myTab.rows[row].cells.length; c  ) {  
                var element = myTab.rows.item(row).cells[c];
                if (element.childNodes[0].getAttribute('type') == 'text') {
                    arrValues.push("'"   element.childNodes[0].value   "'");
                }
            }
        }
        
        // The final output.
        document.getElementById('output').innerHTML = arrValues;
        }

        //console.log (arrValues);   // you can see the array values in your browsers console window. Thanks :-)

Ответ №1:

Вот решение моей проблемы: создать поле со списком только для одного столбца

 // now, add a new to the TABLE.
function addRow() {
    var empTab = document.getElementById('empTable');

    var rowCnt = empTab.rows.length;   // table row count.
    var tr = empTab.insertRow(rowCnt); // the table row.
    tr = empTab.insertRow(rowCnt);

    for (var c = 0; c < arrHead.length; c  ) {
        var td = document.createElement('td'); // table definition.
        td = tr.insertCell(c);

        if (c == 0) {      // the first column.
            // add a button in every new row in the first column.
            var button = document.createElement('input');

            // set input attributes.
            button.setAttribute('type', 'button');
            button.setAttribute('value', 'Remove');

            // add button's 'onclick' event.
            button.setAttribute('onclick', 'removeRow(this)');

            td.appendChild(button);
        }
        
         **else if (c==1) {**\ Defining the first column with a drop-down

            var values = ["","Tiger", "Dog", "Elephant"];
            var select = document.createElement("select");
            select.name = "pets";
            select.id = "pets";
            
            for (const val of values) {
            var option = document.createElement("option");
            option.value = val;
            option.text = val.charAt(0).toUpperCase()   val.slice(1);
            select.appendChild(option);
            }
            td.appendChild(select);
          
            
        }
        
        else{
            // 3rd and 4th column, will have textbox.
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
            ele.setAttribute('value', '');
            td.appendChild(ele);
        
        
        }
    }
}