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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
轮播的简单实现方法
Jul 28 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
domReady的实现案例
2016/11/23 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
开源Web应用框架Django图文教程
2017/03/09 Python
Python对象与引用的介绍
2019/01/24 Python
Python 硬币兑换问题
2019/07/29 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python模块future用法原理详解
2020/01/20 Python
Python如何重新加载模块
2020/07/29 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
写自荐信的七个技巧
2013/10/15 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
严以律己学习心得体会
2016/01/13 职场文书
python获取带有返回值的多线程
2022/05/02 Python