使用JS给Table添加删除行

最新推荐文章于 2021-06-18 13:42:43 发布

wjiaoling136

最新推荐文章于 2021-06-18 13:42:43 发布

阅读量98

点赞数

分类专栏： JS 文章标签： JS Table TableRow TableCell ViewUI

JS 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

刚了解了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" border="1">
<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>