2013年6月10日 14:47:16
既存の入力フォーム以外に１行ずつ項目を追加していきたい。
どうしていいものかわからなかったので、まず、テンプレからコピー作戦でいこうと思った。
しょうがないので
別ウィンドウ でサンプルを作ったぜフォー！
よって、１行追加するためのテンプレートを作成する。
<section class = "none">
<table>
<tbody>
<tr id="template">
<td name="通し番号"><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
</tr>
</tbody>
</table>
<//section>
上記が１行で追加されるテンプレ。
section class = none は、display: none; にしてテンプレを表示しない設定にしています。
name = 通し番号 は通し番号を振っているので数を数える。
表示しないなら tr から記述してもいいのではと思うが、
table から記述しないと table に属していないとみなされ id を取得できない。
で、その後、ボタンをクリックしたときにテンプレを最後に追加するように javascript する。
function addInputbox ( n ) {
var tooshiBangoLen = document.getElementsByName("通し番号").length;
// alert(tooshiBangoLen);
var templateTr = document.getElementById("template");
// alert(templateTr);
var addTableTr = templateTr.cloneNode(true);
var idName = "tabletest";
var tableId = document.getElementById(idName);
var newaddTR = tableId.appendChild(addTableTr);
}
通し番号は ＋１ して代入したいところだが、実はテンプレート自体も name = 通し番号 の名前が付いているので＋１する必要はない。正しい数はむしろ－１
var addTableTr = templateTr.cloneNode(true);
templateTr をコピーします。(true)は、子もコピーするかしないか。trueする falseしない。
var tableId = document.getElementById(idName);
var newaddTR = tableId.appendChild(addTableTr);
既存の table の tbody に id=tabletest を設定しています。
table id=tabletest ではなく tbody id=tabletest に設定するのがポイント
tbodyの最後に、appendChild(コピーしたオブジェクト)を挿入。
しかしこれだけではただ、入力フォームが追加されただけで、POST送信できない。
さらに属性を設定していかなかいと意味がない
appendChild ～の次の行に追加する
var tableId = document.getElementById(idName);
var newaddTR = tableId.appendChild(addTableTr);
// 1列目 通し番号
newaddTR.childNodes[1].childNodes[0].name = "addt" + tooshiBangoLen;
newaddTR.childNodes[1].childNodes[0].value = toBanLen;
// 2列目 商品コード
newaddTR.childNodes[3].childNodes[0].name = "addc" + tooshiBangoLen;
newaddTR.childNodes[3].childNodes[0].value = "";
// 3列目 商品名
newaddTR.childNodes[5].childNodes[0].name = "adds" + tooshiBangoLen;
newaddTR.childNodes[5].childNodes[0].value = "";
※以下略
newaddTR は新しく追加されたオブジェクト。
childNodes[x] は順番に子供に番号が振られている
td とか
で、いろいろ
alert(newaddTR.childNodes[0].tagName)
とかやったりして、tdがどの数字になっているのか割り出した。
すると奇数、１、３、５が Table の TD を指しているのがわかる。
そこでさらに
alert(newaddTR.childNodes[1].childNodes[0].tagName)
これで 新しく追加されたオブジェクトの [1] の [0] が input であることがわかった。
あとは簡単。.name = で POST 用に名前を付ける。
.value = には連番振っているので toBanLen
