jsダイナミックページに表を追加します.
5917 ワード
[size=xx-large][size=large]私たちは実際に開発しています.
あるボタンをクリックして、ダイナミックなウェブページにテーブルや一行を追加してください.これはもっと便利です.しかし、実現したら、必ずページの中に直接にラベルを書くのが簡単ではないです.以下は私のプロジェクトのコードです.持ってきて共有します.
createElement('table')方法はテーブルを作成してから通過します.
insertRow(-1)とinsertCell(-1);表に行と列を追加します.括弧の中には-1があります.そうでないとfirefoxの中に問題があります.chromeの中に入れると問題があります.firefoxは最後の行に自動的に追加されます.chromeはデフォルトで上の行に追加されますので、-1で指定して添加したのは一番下の行です.その後、document.getElemenntByIdを通過します.
apped Child(t)作成したテーブルをページの「div」タブに入れます.削除時に直接にDcument.getElemenntById('table 1')を通します.
removeChild(myNode.parent Node.parent Node.parent Node)方法だけでいいです.
あるボタンをクリックして、ダイナミックなウェブページにテーブルや一行を追加してください.これはもっと便利です.しかし、実現したら、必ずページの中に直接にラベルを書くのが簡単ではないです.以下は私のプロジェクトのコードです.持ってきて共有します.
<html>
<head>
<script type="text/javascript">
var i = 0;
function deleteTable(myNode) {
i --;
document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode);
}
function createImageTable() {
i++;
if(i > 1) {
i --;
alert(" 1 ");
} else {
var t = document.createElement('table');
//
var tr1 = t.insertRow(-1);
var td11 = tr1.insertCell(-1);
td11.align="right";
td11.width="180";
var td12 = tr1.insertCell(-1);
//
td11.innerHTML = " :";
td12.innerHTML = "<input type='text' name='textTitle' id='textTitle' /><input type='hidden' name='quesLeixing' value='image' id='quesLeixing'/> <input type=button value=' ' onclick='deleteTable(this)'/>";
//
var tr1 = t.insertRow(-1);
var td11 = tr1.insertCell(-1);
td11.align="right";
td11.width="180";
var td12 = tr1.insertCell(-1);
//
td11.innerHTML = " :";
td12.innerHTML = "<input type='file' name='myFile' id='imageFile' />";
//
var tr2 = t.insertRow(-1);
var td11 = tr2.insertCell(-1);
td11.align="right";
var td12 = tr2.insertCell(-1);
//
td11.innerHTML = " :";
td12.innerHTML = "<input type='radio' name='textQuesType' value='single' checked='checked'/> <input type=radio name='textQuesType' value='multiple'/> ";
//
var tr3 = t.insertRow(-1);
var td31 = tr3.insertCell(-1);
td31.align="right";
var td32 = tr3.insertCell(-1);
//
td31.innerHTML = " 1 :";
td32.innerHTML = "<input type='text' name='textOption[0].optionName' id='textOption[0].optionName' /> ：<input type='checkbox' name='answer' value='0'/>";
//
var tr3 = t.insertRow(-1);
var td31 = tr3.insertCell(-1);
td31.align="right";
var td32 = tr3.insertCell(-1);
//
td31.innerHTML = " 2 :";
td32.innerHTML = "<input type='text' name='textOption[1].optionName' id='textOption[1].optionName' /> ：<input type='checkbox' name='answer' value='1' />";
//
var tr3 = t.insertRow(-1);
var td31 = tr3.insertCell(-1);
td31.align="right";
var td32 = tr3.insertCell(-1);
//
td31.innerHTML = " 3 :";
td32.innerHTML = "<input type='text' name='textOption[2].optionName' id='textOption[2].optionName' /> ：<input type='checkbox' name='answer' value='2' />";
//
var tr3 = t.insertRow(-1);
var td31 = tr3.insertCell(-1);
td31.align="right";
var td32 = tr3.insertCell(-1);
//
td31.innerHTML = " 4 :";
td32.innerHTML = "<input type='text' name='textOption[3].optionName' id='textOption[3].optionName' /> ：<input type='checkbox' name='answer' value='3' />";
//
var tr3 = t.insertRow(-1);
var td31 = tr3.insertCell(-1);
td31.align="right";
var td32 = tr3.insertCell(-1);
//
td31.innerHTML = " 5 :";
td32.innerHTML = "<input type='text' name='textOption[4].optionName' id='textOption[4].optionName' /> ：<input type='checkbox' name='answer' value='4' />";
t.setAttribute("frame", "below");
t.setAttribute("width", "676");
//t.setAttribute("border", "1");
t.setAttribute("bordercolor", "#818181");
document.getElementById('table1').appendChild(t);
}
}
</script>
</head>
<body>
<font color="#B3171C" size="5"> </font><p/>
<table width="677" border="0" id="quesTable">
<tbody>
<tr>
<td colspan="3" align="center"> ：
<input type="button" name="addtext" value=" " onclick="createImageTable()" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>createElement('table')方法はテーブルを作成してから通過します.
insertRow(-1)とinsertCell(-1);表に行と列を追加します.括弧の中には-1があります.そうでないとfirefoxの中に問題があります.chromeの中に入れると問題があります.firefoxは最後の行に自動的に追加されます.chromeはデフォルトで上の行に追加されますので、-1で指定して添加したのは一番下の行です.その後、document.getElemenntByIdを通過します.
apped Child(t)作成したテーブルをページの「div」タブに入れます.削除時に直接にDcument.getElemenntById('table 1')を通します.
removeChild(myNode.parent Node.parent Node.parent Node)方法だけでいいです.