jquery可增加删除列表格-优快云博客

本文链接：https://blog.youkuaiyun.com/Busing/article/details/83638929

本文介绍了一种使用jQuery实现HTML表格动态增加和删除列的方法。通过定义初始列数并在JavaScript中实现addCol和delCol两个函数，可以方便地根据需要调整表格列的数量。addCol函数用于增加列，通过获取输入框中的列名并将其添加到每一行的末尾；delCol函数用于删除列，确保不会删除到必需的基本列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script src="jquery-1.3.2.js"></script>

<script>

var colNum=6;

						 
function addCol(){
var tablehead=$("#colName").val();
 var currentNum=colNum+1;
$("#lb tr").each(function(i,v){
if(i==5){
 $(this).html($(this).html().replace("colSpan="+colNum,"colSpan="+currentNum));
colNum++;
 return;
}
																				 
 var lastTD=$("#"+$(this).attr("id")+" td:last-child");
 if(i==0)
$("#"+$(this).attr("id")+" td:last-child").after(lastTD.clone().html(tablehead));
else if(i==1){
$("#"+$(this).attr("id")+" td:last-child").after(lastTD.clone().html("设置"));	
}else{
$("#"+$(this).attr("id")+" td:last-child").after(lastTD.clone())
}
 });
}
														
														
														
function delCol(){
 var currentNum=colNum-1;
$("#lb tr").each(function(i,v){
	 if($(this).children().length<=3)
	 {
		return;
	}
																				  
	if(i==5){
		 $(this).html($(this).html().replace("colSpan="+colNum,"colSpan="+currentNum));
		 colNum--;
		return;
	}
		$("#"+$(this).attr("id")+" td:last-child").remove();
																																						
 });
}
</script>
</head>

<body >
<center>
  <table align="center" id="lb" class="list" >
    <tr id="tr1"> 
      <td width="8%" bgcolor="#D0DEF0">姓名</td>
      <td width="13%" bgcolor="#D0DEF0">所在部门</td>
      <td width="11%" bgcolor="#D0DEF0">所任职位</td>
      <td width="13%" bgcolor="#D0DEF0">基薪</td>
      <td width="13%" bgcolor="#D0DEF0">岗薪</td>
      <td width="15%" bgcolor="#D0DEF0">入职时间</td>
    </tr>
    <tr onMouseOver="changeto()" onMouseOut="changeback( '0' )" id="tr2"> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>设置</td>
    </tr>
    <tr onMouseOver="changeto()" onMouseOut="changeback( '1' )" id="tr3"> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
	 <tr onMouseOver="changeto()" onMouseOut="changeback( '0' )" id="tr4"> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     </tr>
    <tr onMouseOver="changeto()" onMouseOut="changeback( '1' )" id="tr5"> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
	 <tr >
      <td colspan="6" align="center" ><div>
        <label>
          <span class="arrow"><a href="#"  class="b">9</a> <a href="#" class="b">3</a> <a href="#" class="b"> 4</a><a href="#" class="b"> :</a></span> 共10条记录 每页5条 转到
          <input name="textfield3222" type="text" class="field"style="width:30px;height:20px" />
          页 <img src="../../../images/btn_go.gif" width="20" height="20" align="absmiddle" > &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="colName" class="field" />&nbsp;<input type="button" id="addCol" onClick="addCol()" class="button" value="添加列"/>&nbsp;&nbsp;</label>
        <input type="button" id="addCol2" class="button" value="删除列" onClick="delCol()"/>
      </div></td>
    </tr>
  </table>
</center>
</body>
</html>