DOMがテーブルを操作する
1637 ワード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
<script>
function add(){
var tbody = document.getElementById("tbody");
var rowNo = tbody.rows.length;
tbody.insertRow(rowNo);
tbody.rows[rowNo].insertCell(0);
tbody.rows[rowNo].cells[0].innerText="0001";//innerText innerHTML
tbody.rows[rowNo].insertCell(1);
tbody.rows[rowNo].cells[1].appendChild(document.createTextNode(" 0407"));
tbody.rows[rowNo].insertCell(2);
tbody.rows[rowNo].cells[2].appendChild(document.createTextNode(" "+rowNo));
tbody.rows[rowNo].insertCell(3);
var button = document.createElement("input");
button.type="button";
button.value=" ";
button.onclick="javascript:alert(0)";//
tbody.rows[rowNo].cells[3].innerHTML="<input type='button' value=' ' onclick='deleteRow()'/>";
}
function deleteRow(){
var rowNo = window.event.srcElement.parentElement.parentElement.rowIndex;
var tbody = document.getElementById("tbody");
tbody.deleteRow(rowNo);
}
</script>
</HEAD>
<BODY>
<TABLE border="1">
<tbody id="tbody">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<button onclick="add()" value=" "> </button>
</BODY>
</HTML>