[英]How to dynamically insert a table row with a select box with options in a table using javascript?
I am having a hard time in inserting table rows dynamically since I haven't really tried it before. 由于之前从未真正尝试过动态插入表行,因此我很难。 What I'm supposed to do is to insert a new table row with a select box with options from the an arraylist.
我应该做的是插入一个带有选择框的新表行,该选择框具有来自arraylist的选项。
So far, this is my code: 到目前为止,这是我的代码:
HTML 的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 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);
}
also, I would also like to know how to pass a variable from the javascript function to a java servlet because every time I pass the variable count in a hidden input type, the input does not contain the count. 另外,我还想知道如何将变量从javascript函数传递到Java servlet,因为每次我以隐藏输入类型传递变量count时,输入中都不会包含该计数。 I hope you can help me with my dilemma.
希望您能为我的困境提供帮助。
Just after you create the "select" element You can simply loop through your"arraylist" and append the options : 在创建“ 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);
}
Take a look at this fiddle : https://jsfiddle.net/bafforosso/66h3uwtd/2/ 看看这个小提琴 : https : //jsfiddle.net/bafforosso/66h3uwtd/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.