先ほどのソースコードです。まだ汚いですが、とりあえず。
HTMLコードはこんな感じです。
<table border="1" id="tdata"> <thead></thead> <tbody id="tbody1"> <tr> <td> <div> <input type="text" id="form1sendt1" name="form1:sendt1" value="xx" size="30"/> <input type="button" value=" add " onClick="addTableRow('tdata', this);"/> <input type="button" value=" rem " onClick="remTableRow('tdata', this);"/> <input type="button" value=" カラム番号 " onClick="checkRow(this);"/> </div> </td> </tr> </tbody> <tfoot></tfoot> </table>
javascriptはこんな感じです。
<!-- 接頭辞を作成。今回は時間を使う --> function createSuffix() { return new Date().getTime(); } <!-- 指定した親がいたらそれを返す --> function findParent(target, pname) { if(target.tagName=='HTML'|| target == top) { return target; } while(true) { var parent=target.parentNode; if(parent.tagName != pname) { parent=findParent(parent, pname); } break; } return parent; } <!-- idなどを一意にするためのメソッド --> function changeValue(attr, suffix) { if(attr == null || attr == undefined) { attr = "alternate"; } var pattern=new RegExp("^(.*)(\\d{13})$"); var result=attr.match(pattern); if(result != null) { return result[1]+suffix; } return attr+suffix; } <!-- 属性のリセット --> function resetAttributes(node) { if(node == null || node == undefined || node.nodeType != 1) { return node; } var suffix = createSuffix(); if(node.attributes.length < 0 || node.getAttribute("type") == null || node.type != "text") { if(node.id != null && node.id != undefined) { node.id=changeValue(node.id, suffix); } if(node.id != null && node.id != undefined) { node.name=changeValue(node.name, suffix); } return node; } node.id=changeValue(node.id, suffix); node.name=changeValue(node.name, suffix); node.value=""; return node; } <!-- 子供ノードをコピーする --> function copyChild(tdNode) { var copy=tdNode.cloneNode(false); resetAttributes(copy); if(tdNode.hasChildNodes()) { var len=tdNode.childNodes.length; for(var i=0;i<len;i++) { var cchild=copyChild(tdNode.childNodes[i]); copy.appendChild(cchild); } } return copy; } <!-- テーブルに行を追加する --> function addTableRow(tid, target) { var fid=target.form.id; <!-- var tbl=document.getElementById(tid); --> var trtop=findParent(target, "TR"); var trtopParent=trtop.parentNode; <!-- alert(trtopParent.tagName); --> var tr=trtopParent.insertRow(trtop.rowIndex+1); <!-- alert("挿入された列の親 "+tr.parentNode.tagName); --> var len=trtop.cells.length; for(var i=0;i<len;i++) { var tdtop=trtop.cells[i]; var clonechild=copyChild(tdtop); tr.appendChild(clonechild); } <!-- checkChild(tr); --> <!-- searchRemainTr(tr); --> } <!-- テーブルの行を削除する --> function remTableRow(tid, target) { var fid=target.form.id; var tbl=document.getElementById(tid); var trtop=findParent(target, "TR"); <!-- checkChild(trtop); --> <!-- searchRemainTr(trtop); --> if(!searchRemainTr(trtop)) {; alert("これ以上無理よ"); return; } tbl.deleteRow(trtop.rowIndex); } <!-- 行を削除可能か確認 --> function searchRemainTr(node) { var par=node.parentNode; <!-- alert("親は "+par.tagName + " 全体の子供の数" + par.childNodes.length+" 自分の配列番号は "+node.rowIndex); --> var relen=par.childNodes.length; var eleCount=0; for(var i=0;i<relen;i++) { if(par.childNodes[i].nodeType == 3) { continue; } eleCount++; } <!-- alert("全体の数 " +relen+ " 要素数 " + eleCount); --> if(eleCount == 1 ) { return false; } return true; }
ちなみに内部で使用している確認用メソッドです。試していたのをそのまま載せてしまいました。。
function checkattr(node) { alert("checkattr start"); if(node == null || node == undefined || node.tagName == undefined) { return node; } if(node.attributes.length < 0 || node.getAttribute("type") == null || node.type != "text") { alert("check tag is " + node.tagName); return node; } alert("check input text tagid is " + node.id); alert("checkattr end"); } function checkChild(tdNode) { alert("checkChild start"); checkattr(tdNode); if(tdNode.hasChildNodes()) { var len=tdNode.childNodes.length; for(var i=0;i<len;i++) { var cchild=checkChild(tdNode.childNodes[i]); } } alert("checkChild end"); } function checkRow(node) { var trtop=findParent(node, "TR"); alert("このカラムの配列番号は " + trtop.rowIndex); }
ふう、ブラウザで挙動が違うと調べるのに手間取ってしまいます。
W3Cなどで技術文書をきちんと読んだ方がいいのかなと思いつつ、
もちっと基礎的なところを勉強したいと思う今日この頃でした。