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 缓存策略的BUG的解决方法
Jul 21 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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
php 文件上传系统手记
2009/10/26 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
用python解压分析jar包实例
2020/01/16 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
一年级班主任寄语
2014/01/19 职场文书
工作保证书范文
2014/04/29 职场文书
团日活动总结书
2014/05/08 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2015年副班长工作总结
2015/05/15 职场文书