天天看點

使用JS給Table添加删除行

剛了解了Table、TableRow、TableCell對象,試着用他們寫個自己的例子。給Table添加删除行。

<html>
<head>
<script type="text/javascript">
function insRow()
  {
  var rowList = document.getElementById("myTable").rows.length;
  var x=document.getElementById('myTable').insertRow(rowList);
  var y=x.insertCell(0);
  var z=x.insertCell(1);
  var z2=x.insertCell(2);
  y.innerHTML=document.getElementById("name").value;
  var sexVal = document.getElementsByName("sex");
  for(var i=0;i<sexVal.length;i++){
     if(sexVal[i].checked){
		 z.innerHTML=sexVal[i].value;
		 sexVal[i].checked=false;
	 }
  }
  z2.innerHTML="<input type='button' value='删除' οnclick='deleteRow(this)'>";
  document.getElementById("name").value="";
  }
function deleteRow(c){
  var index = c.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(index);
}
</script>
</head>

<body>
姓名:<input type="text" id="name" /><br />
性别:<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女" />女<br />
<input type="button" οnclick="insRow()" value="添加">
<br />
<table id="myTable" >
<tr>
  <td>AAA</td>
  <td>男</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>BBB</td>
  <td>女</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>CCC</td>
  <td>男</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>