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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP基本语法总结
2014/09/06 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
JavaScript 事件系统
2010/07/22 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
利用Python破解斗地主残局详解
2017/06/30 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
风险评估实施方案
2014/03/09 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技