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>