<style type="text/css">
       .hover
       {
           
       }
    </style>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <th>
    <input type="checkbox" id="checkall" onclick="checkAll1(this)"/>
    </th>
    <th>姓名</th>
    <th>性别</th>
    <th>密码</th>
    <th>地址</th>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox1" />
    </td>
    <td>张三</td>
    <td>男</td>
    <td>zhangsan</td>
    <td>上海</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox2" />
    </td>
    <td>李四</td>
    <td>男</td>
    <td>lisi</td>
    <td>安庆</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox3" />
    </td>
    <td>王五</td>
    <td>男</td>
    <td>beijing</td>
    <td>北京</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox4" />
    </td>
    <td>无名氏</td>
    <td>女</td>
    <td>wumingshi</td>
    <td>上海</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox5" />
    </td>
    <td>赵老师</td>
    <td>男</td>
    <td>zhaolaoshi</td>
    <td>浙江</td>
    </tr>
    <tr>
    <td colspan="5" align="center">
    <input
type="button" id="btnAdd" runat="server" value="新增"
onclick="btnAddRow()" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input
type="button" id="btnDelete" runat="server" value="删除"
onclick="btnDeleteRow()" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="btnSave" runat="server" value="保存" onclick="btnSaveClick()" />
    </td>
    </tr>
    </table>
操作:

1.鼠标移动行变色
方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能
$("#table1 tr").hover(function(){ 
    $(this).children("td").addClass("hover") 
},function(){ 
    $(this).children("td").removeClass("hover") 
})

方法二:
$("#table1 tr:gt(0)").hover(function() { 
    $(this).children("td").addClass("hover"); 
}, function() { 
    $(this).children("td").removeClass("hover"); 
});

2.奇偶行不同颜色
$("#table1 tbody tr:odd").css("background-color", "#bbf"); 
$("#table1 tbody tr:even").css("background-color","#ffc");  
$("#table1 tbody tr:odd").addClass("odd") 
$("#table1 tbody tr:even").addClass("even")

3.隐藏一行
$("#table1 tbody tr:eq(3)").hide(); 
4.隐藏一列
方法一:
$("#table1 tr td::nth-child(3)").hide();
 
方法二:
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

5.//删除一行
//删除除第一行外的所有行 
     $("#table1 tr:not(:first)").remove();
//删除指定行
     $("#table1 tr:eq(3)").remove();
 
6.//删除一列
//删除除第一列外的所有列 
     $("#table1 tr th:not(:nth-child(1))").remove();
     $("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
     $("#table1 tr td::nth-child(1)").remove();
 
7.得到(设置)某个单元格的值
//设置table1,第2个tr的第一个td的值。   
$("#table1 tr:eq(1) td:nth-child(1)").html("value");   
//获取table1,第2个tr的第一个td的值。   
$("#table1 tr:eq(1) td:nth-child(1)").html();
 
8.插入一行:
/在第二个tr后插入一行 
$("<tr><td>
插入3</td><td>插入</td><td>插入</td><td>插
入</td></tr>").insertAfter($("#table7 tr:eq(1)"));

9:获取每一行指定的单元格的值
var arr = [];
$("#table1 tr td:nth-child(1)").each(function (key, value) {
   arr.push($(this).html());
});
var result = arr.join(',');

//全选或全不选
//方法一:
//全选或全不选 此传入的参数为event 如:checkAll(event)
   function checkAll(evt)
   {
     evt=evt?evt:window.event;
     var chall=evt.target?evt.target:evt.srcElement;
     var tbl=$("#table1");
     var trlist=tbl.find("tr");
     for(var i=1;i<trlist.length;i++)
     {
         var tr=$(trlist[i]);
         var input=tr.find("INPUT[type='checkbox']");
           input.attr("checked",chall.checked);
     }
   }

//方法二:
//全选或全不选 此传入的参数为this 如:checkAll(this)
  function checkAll(evt)
  {
      var tbl=$("#table1");
      var trlist=tbl.find("tr");
      for(var i=1;i<trlist.length;i++)
    {
        var tr=$(trlist[i]);
        var input=tr.find("INPUT[type='checkbox']");
          input.attr("checked",evt.checked);
    }
  }

//方法三:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt)
{
    $("#table1 tr").find("input[type='checkbox']").each(function(i){
    $(this).attr("checked",evt.checked)
    });
}

//方法四:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt)
{
    $("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}

//客户端动态添加行
function btnAddRow()
{
    //行号是从0开始,最后一行是新增、删除、保存按钮行 故减去2
    var rownum=$("#table1 tr").length-2;
    var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
    var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";
    var
sel="<select id='sel_"+rownum+"'><option
value='1'>男</option><option
value='0'>女</option></select>";
    var

row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
    $(row).insertAfter($("#table1 tr:eq("+rownum+")"));   
}

//客户端删除一行
//每次只能删除一行,删除多行时出错
function btnDeleteRow()
{
   $("#table1 tr").find("input[type='checkbox']").each(function(i){
   if($(this).attr("checked"))
   { 
       if(i!=0)//不能删除行标题
       {
            $("#table1 tr:eq("+i+")").remove();
       }
   }
   });
}

//这个比上面的要好,可以一下删除多个记录
function btnDeleteRow()
{
   $("#table1 tr").each(function(i){
       var chk=$(this).find("input[type='checkbox']");
       if(chk.attr("id")!="checkall")//不能删除标题行
       {
       if(chk.attr("checked"))
       {
          $(this).remove();
       }
       }
    });
}

//客户端保存
function btnSaveClick()
{
   //find()方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值
   //$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
   //alert($(this).val());
   //});
             
   $("#table1 tr").find("td").each(function(i){
      if($(this).find("input[type='text']").length>0)
      {
          alert($(this).find("input[type='text']").val());
      }
      else if($(this).find("select").length>0)
      {
          alert($(this).find("select").val());
      }
    });
}

jQuery操作Table学习总结[转]的更多相关文章

  1. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  2. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  3. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  4. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  5. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  6. 如何用jquery操作table的方法

    今天我在做你约我吧交友www.niyuewo.com网项目时遇到一个问题,就是如何用qjuery控制table的添加.编辑与删除,经过网上查资料发现用jquery很容易实现,在此整理下来供大家参考: ...

  7. jQuery操作table tr td

    1.鼠标移动行变色 $("#tab tr").hover(function(){ $(this).children("td").addClass("h ...

  8. JQuery操作TABLE,及console.info问题。

    还用alert 吗?看看console.info吧,代码的测试平台:ie9, firefox12 ​1. [代码][JavaScript]代码<!DOCTYPE html><html ...

  9. jquery 操作table样式拖动参考

    参考: http://blog.csdn.net/kdiller/article/details/6059727 http://www.jb51.net/article/59795.htm

随机推荐

  1. 转 Redis集群技术及Codis实践

    转  Redis集群技术及Codis实践 转自 :http://blog.51cto.com/navyaijm/1637688 codis开源地址:https://github.com/CodisLa ...

  2. oracle 删除数据恢复

    select *  from taxi_comp_worksheet_ext   as of timestamp to_timestamp('2014-09-22 13:00:00', 'yyyy-m ...

  3. AutoHotKey 快速入门

    AutoHotKey 是一个免费的键盘宏程序,可以用于配置键盘快捷键.鼠标事件 以及摇杆事件,还可以在输入文本的时候对文本进行扩展(自动补全) 第一个脚本 新建文件test.ahk并输入以下内容: ^ ...

  4. maven Tomcat idea 热部署

    1.首先得有maven项目 2.配置tomcat,可以访问页面管理项目 修改: /conf/tomcat-users.xml <role rolename="manager-gui&q ...

  5. codesandbox

    codesandbox https://codesandbox.io https://codesandbox.io/dashboard https://codesandbox.io/dashboard ...

  6. ViewData与ViewBag

    ViewData与ViewBag使用的是同一个数据源,因此数据一样,只是ViewBag 不再是字典的键值对结构,而是 dynamic 动态类型(http://www.cnblogs.com/kissd ...

  7. 移动端body跟着模态框一起滑动问题

    遇到了一个问题,是点击链接出现弹框,弹框里面的内容是可以滑动的,结果我滑动的时候发现下面的body也跟着一起滑动,先看一下代码. 弹框的 HTML: <div class="mask& ...

  8. manacher算法详解+模板 P3805

    前言: 记住manacher是一个很简单的算法. 首先我们来了解一下回文字串的定义:若一个字符串中的某一子串满足回文的性质,则称其是回文子串.(注意子串必须是连续的,而子序列是可以不连续的) 那么若给 ...

  9. Python使用requests模块下载图片

    MySQL中事先保存好爬取到的图片链接地址. 然后使用多线程把图片下载到本地. # coding: utf-8 import MySQLdb import requests import os imp ...

  10. bzoj1483: [HNOI2009]梦幻布丁(链表+启发式合并)

    题目大意:一个序列,两种操作. ①把其中的一种数修改成另一种数 ②询问有多少段不同的数如1 2 2 1为3段(1 / 2 2 / 1). 昨晚的BC的C题和这题很类似,于是现学现写居然过了十分开心. ...