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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
p5.js绘制旋转的正方形
Oct 23 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在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
Flask-Mail用法实例分析
2018/07/21 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
安全资料员岗位职责
2013/12/14 职场文书
租车协议书范本
2014/04/22 职场文书
简单租房协议书范本
2014/08/20 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
孔繁森观后感
2015/06/10 职场文书
新郎结婚感言
2015/07/31 职场文书
golang slice元素去重操作
2021/04/30 Golang
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python