JavaScript での空白行の追加と削除で問題が発生しました...これは、ネストの問題と一意の ID の問題です。
要約すると、3 つのフォーム フィールドがあります。フィールド 1、金額 1、金額 2。Field1 には、複数の Amount1 と Amount2 を含めることができます。同様に、複数の Field1 が存在する可能性があり、複数の Amount1、Amount2 も存在する可能性があります。問題は、「追加」ボタンが余分な Amount1、Amount2 (存在する場合) をコピーすることです。説明すると、「行の追加」はAmount1、Amount2を追加します。「行の削除」は、チェックボックスがチェックされている場合、Amount1、Amount2 を削除します。
「追加」ボタンをクリックすると、新しい Field1、Amount1、Amount2 が必要ですが、追加の Amount1、Amount2 は必要ありません。そして、フォームフィールドの追加セットで「行の追加」または「行の削除」をクリックすると、その特定のセットでAmount1、Amount2を追加または削除したいと思います。
これを機能させるには、各行全体に一意の識別子を割り当てる必要がありますが、理解できません。
これが私のコードです。これを実行すると、おそらくより意味のあるものになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><head>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.row[0].cells [i].innerHTML; //alert (newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e)
{
alert(e);
}
}
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
}
</script>
</head>
<body>
<fieldset id="fieldset">
<div id="placeholder">
<div id="template">
<br>
<table id= "act_legis">
<tr>
<td>Field1:</td>
<td>Amount1:</td>
<td>Amount2:</td>
<td> </td>
</tr>
</table>
<table id= "act">
<tr>
<td>
<button type="button" name="Submit"
align = "left" onclick="Add();">Add</button>
<input name="Field1" type="text" size="4" maxlength="4"/></td>
</tr>
</table>
<table id= "legis_amounts">
<tr>
<td>
<input type="checkbox" name="chk"/>
<input name="Amount1" type="text" size="10"maxlength="18"/>
</td>
<td>
<input name="Amount2" type="text" size="10" maxlength="18"/>
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type="button" onclick="addRow('legis_amounts');
return false;" value = "add row"/>
<input type="button" value = "delete row" onclick="deleteRow
('legis_amounts');return false;" />
</td>
</tr>
</table>
</div> <!-- template -->
</div> <!-- placeholder -->
</fieldset>
<table>
<tr>
<td><p> </p>
</td>
</tr>
</table>
</body>
</html>