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 相关文章推荐
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
javascript实现表单验证
Jan 29 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
jquery实现轮播图特效
Apr 12 jQuery
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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
php经典趣味算法实例代码
2020/01/21 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python使用tkinter实现简单计算器
2018/01/30 Python
python实现最长公共子序列
2018/05/22 Python
利用python画出折线图
2018/07/26 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python颜色随机生成器的实例代码
2020/01/10 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
应聘自荐书
2013/10/08 职场文书
业务代表的岗位职责
2013/11/16 职场文书
成人继续教育实施方案
2014/03/01 职场文书
大型营销活动计划书
2014/04/28 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
学校国庆节活动总结
2015/03/23 职场文书
Python WSGI 规范简介
2021/04/11 Python