JS给table动态添加行和列

code12313

已于 2022-02-22 16:46:27 修改

阅读量6k

点赞数 5

文章标签： javascript table动态添加行列 table动态添加列 table动态添加行

于 2022-02-22 13:31:15 首次发布

本文链接：https://blog.csdn.net/code12313/article/details/123066010

版权

效果图：

input为动态添加

<botton onclick="AddTableCell()">添加一列</botton>

<table id="tableWeight">
 <thead>
   <tr>
	 <th>员工号</th>
	 <th>姓名</th>
	 <th>地区</th>
	 <th>角色</th>
	</tr>
	<tr>
	  <td>
	  2</td>
	  <td>
	  3</td>
	  <td>
	  4</td>
	  <td>
	  5</td>
  </tr>
 </thead>
</table>    

<button id="addTable" onclick="AddTableRow()">添加一行</button>


<script type="text/javascript">
   //动态添加行
   function AddTableRow()
   {

	   var Table = document.getElementById("tableWeight"); //取得自定义的表对象
	   
	    var rows = Table.rows.length;
	   
	   NewRow = Table.insertRow(); //添加行
	  
	   var cellLength=Table.rows[0].cells.length;
	   console.log(cellLength)
	   for(var i=0; i<cellLength;i++){
		  var NewCell=NewRow.insertCell();
		   //NewCell.innerHTML="<input id='r"+(rows+1)+"t"+(i+1)+"' value='22' style='width:30px;'/>";
		   NewCell.innerHTML="<input id='gradeR"+(rows+1)+"t"+(i+1)+"' value='' style='width:30px;' type='text' class='input-large' placeholder='等级'/>&nbsp;<input id='weightR"+(rows+1)+"t"+(i+1)+"' value='' style='width:30px;' type='text' class='input-large' placeholder='权重'/>";
	     }
	 }
   
   //动态添加列
   function AddTableCell(){
	    var Table = document.getElementById("tableWeight");  //取得自定义的表对象
	   
	    var rowLength = Table.rows.length;  //行數量

	    var cellLength=Table.rows[0].cells.length; //查找單元格数量

	    for(var i=0;i<rowLength;i++){
	    	//第一行添加一个输入框
	    	if(i==0){
	    		var NewCell= Table.rows[i].insertCell(cellLength);
		    	NewCell.innerHTML="<input id='r"+(i+1)+"t"+(cellLength+1)+"' value='' style='width:60px;'  title='横向模拟等级'  type='text' class='input-large' placeholder='模拟等级'/>";
	    	}else{
	    		//添加2个输入框
	    		var NewCell= Table.rows[i].insertCell(cellLength);
		    	NewCell.innerHTML="<input id='gradeR"+(i+1)+"t"+(cellLength+1)+"' value=''  type='text' class='input-large' style='width:30px;' placeholder='等级'/>&nbsp;<input id='weightR"+(i+1)+"t"+(cellLength+1)+"' value='' style='width:30px;'  type='text' class='input-large' placeholder='权重'/>";
	    	}
	    	
	    }
	    
   }
   //删除一行
   function DelTableRow(){
	   
	   var Table = document.getElementById("tableWeight");  //取得自定义的表对象
	   
	   var rowLength = Table.rows.length;  //行數量
	   
	   if(rowLength>2){ 
	      Table.deleteRow(rowLength-1);
	   }else{
		   alert('不能全部删除！');
	   }
   }
   //删除一列
   function DelTableCell(){
      
	   var Table = document.getElementById("tableWeight");  //取得自定义的表对象
	   
	   var rowLength = Table.rows.length;  //行數量
	   
	   var cellLength=Table.rows[0].cells.length; //查找單元格数量
	   if(cellLength>1){
	     for(var i=0;i<rowLength;i++){
		   Table.rows[i].deleteCell(cellLength-1);
	     }
	   }else{
		   alert('不能全部删除！');
	   }
	  // if(rowLength>2){ 
	      //Table.rows[0].deleteCell(2);
	   //}else{
		 // alert('不能全部删除！');
	   //}
   }
</script>