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相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 基于JQuery的动态删除Table表格的行和列的代码

    首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 复制代码 代码如下: for(var i=0;i<num+1;i++) { $("table tr").eq(i).find("td").eq(0).remove(); } 解释: num是从后台获取到的列表总和+1是为了表头那个也去掉. 第一个eq(i)是获取Table里的TR索引 第二个

  • 利用jquery给指定的table动态添加一行、删除一行的方法

    利用jquery给指定的table动态添加一行、删除一行的方法

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

  • 使用jquery为table动态添加行的实现代码

    这里,用的jquery来做的.关键代码如下: 复制代码 代码如下: //添加數據行: function AddRow(){ var vTb=$("#TbData");//得到表格ID=TbData的jquery对象 //所有的数据行有一个.CaseRow的Class,得到数据行的大小 var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行 var vTr=$("#

  • 基于jquery的实现简单的表格中增加或删除下一行

    代码如下: html 复制代码 代码如下: <div> <table> <tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><

  • jquery通过a标签删除table中的一行的代码

    复制代码 代码如下: <tr> <td width="10%"> <s:property value="#owner.id" /> </td> <td width="20%"> <s:property value="#owner.name" /> </td> <td width="15%"> <s:prop

  • JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row

  • jQuery增加与删除table列的方法

    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

  • jquery增加和删除元素的方法

    jquery增加和删除元素的方法

    本文实例讲述了jquery增加和删除元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery增加删除元素</title> <script type="text/javascript&

  • jQuery增加、删除及修改select option的方法

    本文实例讲述了jQuery增加.删除及修改select option的方法.分享给大家供大家参考,具体如下: jQuery获取Select选择的Text和Value: 1. //获取Select选择的Text var checkText=jQuery("#select_id").find("option:selected").text(); 2. //获取Select选择的option Value var checkValue=jQuery("#selec

  • jQuery插件dataTables添加序号列的方法

    官网方法实例: $(document).ready(function() { var t = $('#example').DataTable({ "columnDefs": [{ "searchable": false, "orderable": false, "targets": 0 }], "order": [[1, 'asc']] }); t.on('order.dt search.dt', func

  • Java数组,去掉重复值、增加、删除数组元素的方法

    Java数组,去掉重复值、增加、删除数组元素的方法

    如下所示: import java.util.List; import java.util.ArrayList; import java.util.Set; import java.util.HashSet; public class lzwCode { public static void main(String [] args) { testA(); System.out.println("==========================="); testB(); System

  • jQuery实现动态给table赋值的方法示例

    jQuery实现动态给table赋值的方法示例

    本文实例讲述了jQuery实现动态给table赋值的方法.分享给大家供大家参考,具体如下: html 请忽视各种class,因为前端用的是layui <table class="layui-table" lay-skin="line" id="datas"> <colgroup> <col width="150"> <col width="200"> <

  • jQuery增加和删除表格项目及实现表格项目排序的方法

    jQuery增加和删除表格项目及实现表格项目排序的方法

    增加和删除行 jquery对表格的操作是老生常谈的问题.最近项目中用到了,今天在这里分享一下! 效果大体如下: 分享一下代码吧! html <div class="table-responsive" id="Bk_table" style="display:none;"> <table class="table table-hover table-bordered"> <thead> <

  • jQuery添加和删除指定标签的方法

    jQuery如何为指定标签添加和删除一个样式: 在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能. 一.使用addClass()和removeClass()添加和删除一个CSS类: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q

随机推荐