JS给table动态添加行和列

关注

原创 2022-02-22 16:46:27 6.4k 阅读 AI 写同款· GEO 优化 ›

＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高及使用注意事项＞由于项目需求，需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源，出一期 “ 使用事项 ” 及使用过程中的问题汇总阅读详情

效果图：

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>