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在JavaScript上的7个不同写法小结
Sep 14 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
js+css3制作时钟特效
Oct 16 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
layui 设置table 行的高度方法
Aug 17 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中,文件上传
2006/12/06 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
Python类的专用方法实例分析
2015/01/09 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
一篇.NET面试题
2014/09/29 面试题
师范毕业生自荐信
2013/10/17 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技