我通过按钮点击动态生成元素,如下所示。
javascript,有助于生成多个表格行
<SCRIPT language="javascript">
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";
element1.name = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "car";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("select");
element3.name = "group";
cell3.appendChild(element3);
}
</SCRIPT>
Html
<form name="frm01" action="#" method="post">
<TABLE id="tblData" width="300px" border="0">
<tr>
<td></td>
<td><b>Car</b>
</td>
<td><b>Group</b>
</td>
<td><INPUT type="button" value="Add Row"
onclick="addRow('tblData')" /></td>
</tr>
</TABLE>
<br> <input type="submit" value="submit" name="submit">
</form>
输出如下所示。
我在数据库中有一个表格 car_groups ,列 grp_id,grp_name 。我需要使用 car_groups 表中的值动态填充上面的下拉列表。
动态生成的下拉应如下所示。 grp_id
为值,grp_name
为显示。
<select id="grp_select" name="grp_select">
<option></option>
<option value="1">Group A</option>
<option value="2">Group B</option>
<option value="3">Group C</option>
</select>
我怎样才能实现这个目标?
答案 0 :(得分:1)
你需要在该函数中的select中动态添加选项。
var cell3 = row.insertCell(2);
var element3 = document.createElement("select");
element3.name = "group";
element3.options[0] = new Option("Group A","1");
element3.options[1] = new Option("Group B","2");
element3.options[2] = new Option("Group C","3");
cell3.appendChild(element3);
我不知道您的后端语言,因此您必须通过在后端循环数据集来动态创建添加选项行。
更好的方法是使用jquery或其他东西进行DOM操作,并创建数据集的json以便在javascript中使用。