jQuery增加與刪除table列的方法

更新時(shí)間：2016年03月01日 09:35:50 作者：yenange

這篇文章主要介紹了jQuery增加與刪除table列的方法,涉及jQuery針對(duì)table表格元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery增加與刪除table列的方法。分享給大家供大家參考，具體如下：

先來看看運(yùn)行效果圖：

完整代碼如下：

<!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>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

jQuery
table

相關(guān)文章

2014 HTML5/CSS3熱門動(dòng)畫特效TOP10
本文給大家總結(jié)了10款本站今年比較熱門的html5/css3的動(dòng)畫特效，附上演示地址和下載地址，有需要的小伙伴對(duì)比著使用。
2014-12-12
jQuery移動(dòng)web開發(fā)之頁(yè)面跳轉(zhuǎn)和加載外部頁(yè)面的實(shí)現(xiàn)
這篇文章主要介紹了jQuery移動(dòng)web開發(fā)之頁(yè)面跳轉(zhuǎn)和加載外部頁(yè)面的實(shí)現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下
2015-12-12
jQuery圖片前后對(duì)比插件beforeAfter用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery圖片前后對(duì)比插件beforeAfter用法,結(jié)合實(shí)例形式分析了beforeAfter插件的功能、參數(shù)用法與使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-09-09
jQuery時(shí)間日期三級(jí)聯(lián)動(dòng)(推薦)
這篇文章主要介紹了jQuery時(shí)間日期三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)代碼，代碼簡(jiǎn)答易懂，非常實(shí)用，需要的朋友參考下吧
2016-11-11
jquery刪除數(shù)據(jù)記錄時(shí)的彈出提示效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的刪除數(shù)據(jù)記錄時(shí)的彈出提示效果,需要的朋友可以參考下
2014-05-05
jquery禁用右鍵示例
這篇文章主要介紹了jquery禁用右鍵示例,需要的朋友可以參考下
2014-04-04
web前端設(shè)計(jì)師們常用的jQuery特效插件匯總
這篇文章主要匯總了web前端設(shè)計(jì)師們常用的jQuery特效插件,需要的朋友可以參考下
2014-12-12
基于jquery的時(shí)間段實(shí)現(xiàn)代碼
基于jquery的時(shí)間段實(shí)現(xiàn)代碼，需要的朋友可以參考下
2012-08-08
jquery 給動(dòng)態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
下面小編就為大家分享一篇jquery 給動(dòng)態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
jQuery bind事件使用詳解
很久沒有寫東西了，今天在工作中碰見問題才發(fā)現(xiàn)。以后得多逼自己多抽時(shí)間來寫寫自己的東西，也順便和大家分享一下自己在工作中碰見的問題。
2011-05-05