table标签新增删除行

最新推荐文章于 2018-03-27 22:35:24 发布

yu__yfchun125

最新推荐文章于 2018-03-27 22:35:24 发布

阅读量439

点赞数

文章标签： table input stylesheet button border function

本文链接：https://blog.csdn.net/yu__yfchun125/article/details/2496919

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<link href="component.css" _fcksavedurl=""component.css"" rel="stylesheet" type="text/css">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<div align="center">
<div id="table_div" align="left" style="height:30px; width:38% ;overflow:auto ">
<table width="95%" height="11%" border="1" align="left" id="tab2" cellpadding="0" cellspacing="0">
    <tr>
      <td width="41%" height="57%"> </td>
      <td colspan="2" align="right">
    <input name="add" type="button" id="add" value="add" onClick="addRow()"/>
    <input name="remove7" type="button" id="remove7" value="remove" onClick="remove()"/>
    <input name="edit" type="button" id="edit" value="edit"/>
   </td>
    </tr>
</table>
</div>
<div id="table_div" align="left" style="height:300px; background-color:#CCCCCC; width:38% ;overflow:auto ">
<table width="95%" height="11%" border="1" align="left" id="tab1" cellpadding="0" cellspacing="0">
    <tr id="tr1">
      <td height="43%"><input id="define"   type="checkbox" name="checkbox" value="checkbox" onClick="selectall(this)">
select all </td>
      <td width="21%">Name</td>
      <td width="38%">address</td>
    </tr>
</table>
</div>
</div>
</form>
</body>
<script >
var   count =false
function addRow(){
     count =!count;
   var   rowL = document.getElementById("tab1").rows.length;
   var   newtr =document.getElementById("tab1").insertRow(rowL);
   newtr.id=rowL;
   if(count){
   newtr.style.background="#FFE1FF"
   }else{
   newtr.style.background="#FFEFD5"
   }
   var    newCell1= newtr.insertCell();
   var    newCell2= newtr.insertCell();
   var    newCell3= newtr.insertCell();
   newCell1.innerHTML ="<input type=/"checkbox/" name=/"checkbox/" value=/""+rowL+"/"> select";
   newCell2.innerHTML =rowL;
   newCell3.innerHTML ="<input type ='text' readonly=true id='address"+rowL+"_"+3+"' value =" +rowL+"_"+3+">";
}
function   selectall(obj){
  var   ele= document.forms[0];
  for(var i =0; i <ele.length; i++){
   if(ele[i].type=="checkbox" && ele[i].id!=obj.id){
    ele[i].checked= obj.checked;
   }
  }
}
function   remove(){
  var   ele= document.forms[0];
  for(var i =0; i <ele.length; i++){
   if(ele[i].type=="checkbox" && ele[i].id!='define'){
    if(ele[i].checked==true){
       var DelRow=document.getElementById(ele[i].value).rowIndex;
      tab1.deleteRow(DelRow);
      remove();
     }
    }
  }
}
</script>
</html>

yu__yfchun125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table标签新增删除行

"http://www.w3.org/TR/html4/loose.dtd">无标题文档   select all Name address var count =false function addRow(){ count =!coun
复制链接

扫一扫