以下列出13个jQuery操作table常用到的功能:

1.鼠标移动行变色

$('#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');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");

3.隐藏一行


$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

4.隐藏一列

$('#table1 tr td::nth-child(3)').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(',');

10.全选或全不选


//方法零:
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // 给当前一起绑定的子选择添加效果
});

//方法一:
//全选或全不选 此传入的参数为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);
}

11.客户端动态添加行


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+")"));
}

12.客户端删除一行


每次只能删除一行,删除多行时出错
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();
}
}
});
}

13.客户端保存


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使用jxl插件导出excel示例

functionformattable(tableHtml,sheetName){vartemplate='htmlxmlns:o="urn:schemas-microsoft-com:office:office"xmlns:x="urn:schemas-microsoft-com:office:excel"xmlns="http://www.w3.org/TR/REC-html40"head!-

jQuery 鼠标经过(hover)事件的延时处理示例

一、关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS:hover伪类实现,复杂点的用js。一般情况下,我们是不

jquery datepicker参数介绍和示例

!DOCTYPEhtmlhtmlheadlinkhref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"rel="stylesheet"type="text/css"/scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jqu

最新文章

  1. C++构造函数和析构函数
  2. 1-MySQL命令行
  3. NSDate和NSDateFormatter 相关应用代码示例
  4. PageContext
  5. robotframework笔记15
  6. maven的安装与使用
  7. IE6下window.location.href不跳转到相应url
  8. 如何进行fragment中的来回切换?
  9. ios8 swift开发:显示变量的类名称
  10. 介绍两个Android不常用的Drawable:GradientDrawable和 StateListDrawable
  11. Vue2.0 脚手架代码详解
  12. Learn the Basics - RN2
  13. nmcli工具详解
  14. 【代码笔记】Web-手机端的meta
  15. V4L2 driver -整体架构
  16. Python3 格式化字符串
  17. GO入门——3. 控制语句
  18. 智能边缘计算,让IoT有大智慧
  19. swift学习笔记之控制流
  20. 最小生成树的变形(次小生成树hdu4081)

热门文章

  1. inspeckage
  2. 在Linux中实现打印目录程序遇到问题及解决
  3. c++的double转string(转)
  4. js数字取整的方法
  5. Linux系统Shell脚本第五章:shell数组、正则表达式及文件三剑客之AWK
  6. SSL certificate problem: unable to get local issuer certificate 错误解决
  7. ES5 绑定 this 的方法
  8. C# RichTextBox跳转到指定行(文本行跳转和显示行跳转)
  9. KingbaseES V8R6备份恢复案例之---自定义表空间指定恢复目录数据恢复
  10. 【虚拟机】虚拟机安装win10