使用 javascript 创建组合框时遇到问题

Question

我需要帮助在我的 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:-)

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