jQuery增加与删除table列的方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了jQuery增加与删除table列的方法。分享给大家供大家参考,具体如下:

先来看看运行效果图:

jQuery增加与删除table列的方法

完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function addCol() {
  $th = $("<th>增加的列头</th>");
  $col = $("<td>增加的列</td>");
  $("#tab1>thead>tr").append($th);
  $("#tab1>tbody>tr").append($col);
}
function delCol() {
  //移除最后一列
  $("#tab1 tr :last-child").remove();
  //移除第一列
  //$("#tab1 tr :first-child").remove();
  //移除指定的列, 注:这种索引从1开始
  //$("#tab1 tr :nth-child(2)").remove();
  //移除第一列之外的列
  //$("#tab1 tr :not(:nth-child(1))").remove();
}
// --></script>
</head>
<body>
<input id="Button1" type="button" onclick="addCol()" value="增加列" />
<input id="Button2" type="button" onclick="delCol()" value="减少列" />
  <table id="tab1" border="1" style="width: 200px;">
    <thead>
    <tr>
      <th>
        Id</th>
      <th>
        Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>
        1</td>
      <td>
        叶子</td>
    </tr>
    <tr>
      <td>
        2</td>
      <td>
        王子</td>
    </tr>
    </tbody>
  </table>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
改版了网上的一个js操作userdata
Apr 27 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 #Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 #Javascript
JavaScript Array对象详解
Mar 01 #Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 #Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 #Javascript
原生javascript实现解析XML文档与字符串
Mar 01 #Javascript
JS创建对象几种不同方法详解
Mar 01 #Javascript
You might like
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
javascript 函数式编程
2007/08/16 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
单位单身证明范本
2014/01/11 职场文书
学校安全工作制度
2014/01/19 职场文书
学期自我评价
2014/01/27 职场文书
中学生个人自我评价
2014/02/06 职场文书
40岁生日感言
2014/02/15 职场文书
先进集体事迹材料
2014/02/17 职场文书
企业管理不到位检讨书
2019/06/27 职场文书