http://jsajax.com/Articles/TableInsertRow/157を参考に、[行を挿入]ボタンをクリックすると最終行の下に行が追加され、その中にテキストボックスを配置し計算を行うようにしたいと思い、下記のソースを記述しました。
そして追加した行で正常に計算を行うために、insertRow内のinnerHTMLのgoods_a_3の3の部分を動的に設定したり、calc内の計算式を動的にループさせる必要があると思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。

<script type="text/javascript">
<!--
window.onload = function() {
document.getElementById("btnInsert").onclick = insertRow;
}
function insertRow() {
var tbl = document.getElementById("Table1");
var row = tbl.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input type=\"text\" name=\"goods_a_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />*";
cell2.innerHTML = "<input type=\"text\" name=\"goods_b_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />=";
cell3.innerHTML = "<input type=\"text\" name=\"ans3\" size=\"8\" value=\"0\" disabled=\"disabled\" />";
}
function calc(){
document.form1.ans1.value = document.form1.goods_a_1.value * document.form1.goods_b_1.value;
document.form1.ans2.value = document.form1.goods_a_2.value * document.form1.goods_b_2.value;
}
// -->
</script>
</head>
<body>
<form action="#" name="form1" id="form1">
<table id="Table1" border="1">
<tr>
<td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc();" />*</td>
<td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc();" />=</td>
<td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td>
</tr>
<tr>
<td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc();" />*</td>
<td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc();" />=</td>
<td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td>
</tr>
</table>
</form>
<br />
<input id="btnInsert" type="button" value="行を挿入" />

以上、よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

たとえばこんな風にするとかでしょうか。



<script type="text/javascript">
<!--
window.onload = function() {
document.getElementById("btnInsert").onclick = insertRow;
}
function insertRow() {
var tbl = document.getElementById("Table1");
//最終行をテーブルの行数から判断するようにする
var len = tbl.rows.length;
var row = tbl.insertRow(len);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

//nameを動的に設定、calcの引数に自オブジェクトを設定するようにする
cell1.innerHTML = "<input type=\"text\" name=\"goods_a_" + (len+1) +"\" size=\"3\" value=\"0\" onchange=\"calc(this);\" />*";
cell2.innerHTML = "<input type=\"text\" name=\"goods_b_" + (len+1) +"\" size=\"3\" value=\"0\" onchange=\"calc(this);\" />=";
cell3.innerHTML = "<input type=\"text\" name=\"ans" + (len+1) + "\" size=\"8\" value=\"0\" disabled=\"disabled\" />";
}

//引数を追加
function calc(inputObj) {
// formを取得
var frm = inputObj.form;
// nameの数字部分を取得(とりあえず桁数で決め打ち)
var id = inputObj.name.substring(8);
// 計算
frm.elements['ans' + id].value = frm.elements['goods_a_' + id].value * frm.elements['goods_b_' + id].value;
}
// -->
</script>
</head>
<body>
<form action="#" name="form1" id="form1">
<table id="Table1" border="1">
<tr>
<td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc(this);" />*</td>
<td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc(this);" />=</td>
<td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td>
</tr>
<tr>
<td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc(this);" />*</td>
<td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc(this);" />=</td>
<td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td>
</tr>
</table>
</form>
<br />
<input id="btnInsert" type="button" value="行を挿入" />

入力文字の数値チェックとかをしていませんが、参考になれば幸いです。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースを試したところ、意図した動作となりました。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

お礼日時:2011/04/25 11:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報