编程 Javascript

jQuery增加与删除table列的方法

Posted in Javascript onMarch 01, 2016

本文实例讲述了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程序设计有所帮助。

jQuery增加与删除table列的方法

- Author -

yenange

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jQuery的计算文本框字数的代码

Jun 06 Javascript

JavaScript中的toLocaleDateString()方法使用简介

Jun 12 Javascript

使用jQuery Rotare实现微信大转盘抽奖功能

Jun 20 Javascript

JS只能输入正整数的简单实例

Oct 07 Javascript

Angular.JS中的指令引用template与指令当做属性详解

Mar 30 Javascript

浅谈使用React.setState需要注意的三点

Dec 18 Javascript

详解在不使用ssr的情况下解决Vue单页面SEO问题

Nov 08 Javascript

vuejs2.0运用原生js实现简单拖拽元素功能

Aug 21 Javascript

实例讲解JavaScript预编译流程

Jan 24 Javascript

Vue 理解之白话 getter/setter详解

Apr 16 Javascript

微信小程序云开发之使用云函数

May 17 Javascript

JavaScript如何处理移动端拍摄图片旋转问题

Nov 16 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