[転載]JavaScriptでDOM技術動的制御表を使用する
2145 ワード
転載先:
http://blog.csdn.net/lldwolf/archive/2008/03/31/2234372.aspx
以下の例では、3＊2のテーブルで、ボタンを押した後、2行目を削除して、新しい行を挿入します.このコードはIE 6とFFの下でテストに合格しました.
http://blog.csdn.net/lldwolf/archive/2008/03/31/2234372.aspx
以下の例では、3＊2のテーブルで、ボタンを押した後、2行目を削除して、新しい行を挿入します.このコードはIE 6とFFの下でテストに合格しました.
<table border="1" width="500">
<tbody id="tb1">
<tr id="tr1">
<td width="50%">1</td>
<td widht="50%"> </td>
</tr>
<tr id="tr2">
<td bgcolor="red">2</td>
<td> </td>
</tr>
<tr id="tr3">
<td>3</td>
<td> </td>
</tr>
<tbody>
</table>
<form name="form1">
<input type="button" value="test" onclick="test()" />
</form>
<script type="text/javascript">...
function test()
...{
var frm = document.form1;
var tb = document.getElementById("tb1"); //
var trs = tb.getElementsByTagName("tr"); // <tr>
var del_tr = trs[1]; // 2
var tr = tb.removeChild(del_tr); // 2
var new1 = document.createElement("tr"); //
tb.appendChild(new1);
var new_td1 = document.createElement("td"); //
new_td1.style.color = "blue"; // 1
new_td1.setAttribute("align", "center"); // 1
new_td1.innerHTML = "aa"; // 1
new1.appendChild(new_td1);
var new_td2 = document.createElement("td"); // 2
new_td2.innerHTML = " ";
new_td2.style.backgroundColor = "red"; //
new1.appendChild(new_td2);
tb.appendChild(new1);
}
</script>