如何使用javascript動態在表格中插入帶有選擇框的表格行？

Question

由於之前從未真正嘗試過動態插入表行，因此我很難。 我應該做的是插入一個帶有選擇框的新表行，該選擇框具有來自arraylist的選項。

到目前為止，這是我的代碼：

的HTML

<TABLE id="dataTable">         
    <TR>             

        <TD> 1</TD>             
        <TD> 
            <select name="option">
            <%for(int i = 0; i < jList.size(); i ++){%>
            <option value="<%=jList.get(i).getName%>"><%=jList.get(i).getName%></option>
            <%}%>
            </select>
        </TD>         
    </TR>     
    </TABLE> 
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />  

JAVASCRIPT

function addRow(tableID) {               
    var table = document.getElementById(tableID);               
    var rowCount = table.rows.length;         
    var count = rowCount + 1;
    var row = table.insertRow(rowCount);               
         //*** EDIT ***               
    var cell1 = row.insertCell(0);             
    cell1.innerHTML = count;
    var cell2 = row.insertCell(1);             
    var element2 = document.createElement("select");   
//how do i put the options from the arraylist here?
    cell2.appendChild(element2);  



}

另外，我還想知道如何將變量從javascript函數傳遞到Java servlet，因為每次我以隱藏輸入類型傳遞變量count時，輸入中都不會包含該計數。 希望您能為我的困境提供幫助。

Answer 1

在創建“ select”元素之后，您可以簡單地遍歷“ arraylist”並附加選項：

function addRow(tableID) {               
    var table = document.getElementById(tableID);               
    var rowCount = table.rows.length;         
    var count = rowCount + 1;
    var row = table.insertRow(rowCount);               
        //*** EDIT ***               
    var cell1 = row.insertCell(0);             
    cell1.innerHTML = count;
    var cell2 = row.insertCell(1);             
    var element2 = document.createElement("select");

    //Append the options from the arraylist to the "select" element
    for (var i = 0; i < arraylist.length; i++) {
        var option = document.createElement("option");
        option.value = arraylist[i];
        option.text = arraylist[i];
        element2.appendChild(option);
    }

    cell2.appendChild(element2);  
} 

看看這個小提琴 ： https : //jsfiddle.net/bafforosso/66h3uwtd/2/