<!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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>设置</td>
</tr>
<tr onMouseOver="changeto()" onMouseOut="changeback( '1' )" id="tr3">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="changeto()" onMouseOut="changeback( '0' )" id="tr4">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="changeto()" onMouseOut="changeback( '1' )" id="tr5">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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" > <input type="text" id="colName" class="field" /> <input type="button" id="addCol" onClick="addCol()" class="button" value="添加列"/> </label>
<input type="button" id="addCol2" class="button" value="删除列" onClick="delCol()"/>
</div></td>
</tr>
</table>
</center>
</body>
</html>
分享到：
相关推荐
jquery脚本实现动态添加列，删除指定列
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列，在学习jQuery的过程中，自己试着在网上找寻教程，发现都不符合自己的需要，所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一行...
可编辑的类似于excel功能的jQuery开发的表格，功能上还有很多的缺陷，望网上的各位牛人大哥们。帮小弟优化一下。并完善其功能 现在可以实现，添加或附加行列，删除行和列。简单的合并行或列。现在想将其添加到...
首先要获取Table表格的行数，我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图： 如果我要打印这个表格但不想要操作那列的内容咋办？ 代码如下: for(var i=0;i<num+1;i++) { $...
editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作，其中可以设置参数，如： operatePos 用于设置放置操作的列，从0开始，-1表示以最后一列作为放置操作的列；（这里的操作包括 编辑当前行、在当前行下...
主要介绍了jQuery实现表格行和列的动态添加与删除方法,涉及jQuery针对页面元素的动态添加与删除相关技巧,非常简便实用,需要的朋友可以参考下
因为之前有一份资源有朋友咨询过X,Y轴交互及区间范围中进行取值的一个问题，所以补一份区间范围的交互及json格式获取数据的demo，如需实现自己所需效果可以自行修改，有疑问也可以留言，json输出如：[{min:0,max:10,...
主要介绍了jQuery增加与删除table列的方法,涉及jQuery针对table表格元素动态操作相关技巧,需要的朋友可以参考下
editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作，其中可以设置参数，如： operatePos 用于设置放置操作的列，从0开始，-1表示以最后一列作为放置操作的列；（这里的操作包括 编辑当前行、在当前行下...
功能实现：点击添加按钮，表格增加一行并给其name属性赋予的值，方便获取 点击删除，自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows....
刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复造轮子，如有...
自己用jQuery写的一个table的jQuery操作的demo，里面几乎涵盖了大部分的jquery语法，对想学习jquery的同学来说是很有帮助的
提供了若干易用的客户端方法，让你的程序在添加、修改、删除表格数据时无需重新加载大量的表格数据，而仅需要更新客户端展现结果，这样使得程序的后台访问次数大大降低。采用了类似AjaxPro的异步回调方式，使得您...
主要介绍了超级简单的jquery操作表格方法,可实现针对表格行与列的增加及删除操作,是非常实用的技巧,需要的朋友可以参考下
当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）： 实例 <script type="text/javascript" src="jquery.js"> ...
在这里我们需要控制用户的输入验证，表格的添加删除，用户输入数据的统计聚合，还有相应的计算列比如商品的总价=商品的单价*商品数量，再如，同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的...
47 3.9 查明元素何时获得和失去焦点 49 3.10 在按钮上应用悬停效果 50 3.11 切换应用一个CSS类 52 3.12 创建基于图像的变换 54 3.13 为响应事件而添加和删除文本 57 3.14 应用样式作为对事件的响应 58 3.15 显示文字...