ドロップダウン選択、入力ボックス、保存ボタンを含むダイアログポップアップがあります。この保存ボタンは、ユーザーのドロップダウン/入力値を使用して親テーブルを更新しますが、テーブルの最後にあります。テーブルの選択された親の部分の下にこれらの値が必要です。私の父のドロップダウンには独立した 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>