我弹出一个对话框，其中包含下拉选择、一个输入框和一个保存按钮。此保存按钮使用用户下拉/输入值更新父表，但位于表的末尾。我需要将这些值放在表中所选父亲部分的下方。我的父亲下拉菜单有独立的 ID，我只是不知道如何实现它。我试图剥离我的代码以在 jsfiddle 中工作，但演示不会向表中添加值。这是我弹出对话框的代码：
<script>
$("#save").click(function () {
for(var j=0;j<document.getElementsByName("select1").length;j++) {
updateParent1(document.getElementsByName("select1").item(j).value + ' ' +
document.getElementsByName("text1").item(j).value + ' - ' +
document.getElementsByName("select2").item(j).value,
document.getElementsByName("chooseFather").item(j).value);
}
});
</script>
<form method="post" name="shoreInfo">
<table>
<tr>
<td>
<select name="select1" value="1">
<option selected value="undefined">Select...</option>
<option value="Value 1 (option1)">Value 1 (option1)</option>
<option value="Value 1 (option2)">Value 1 (option2)</option>
</select>
</td>
<td>
<select name="chooseFather" value="4">
<option selected value="undefined">Select...</option>
<option id="father3">Choose to add this information under father3 row.</option>
<option id="father4">Choose to add this information under father4 row.</option>
</select>
</td>
<td>
<select name="select2" value="3">
<option selected value="undefined">Select...</option>
<option value="Value 2 (option1)">Value 2 (option1)</option>
<option value="Value 2 (option2)">Value 2 (option2)</option>
</select>
</td>
<td>
<input type="text" name="text1" value="2" class="text94 apni"/>
</td>
<td><input type="button" value="Add values to table" id="save" />
</td>
</tr>
</table>
</form>
这是父页面的代码：
<script>
function updateParent1(value1) {
var table = document.getElementById("shore_tab");
var rowCount = table.rows.length;
//alert(rowCount);
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "";
var cell2 = row.insertCell(1);
cell2.innerHTML = value1;
var cell3 = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell3.innerHTML = "<img title='remove' src='images/delete-row-icon1.png' class='sub_icon remove'/> ";
cell3.appendChild(element1);
}
</script>
<table id="shore_tab" border="1">
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">Category 3</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">Category 4</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
</table>