jQuery操作表格（table）的常用方法、技巧彙總

轉自：https://blog.csdn.net/liaoxm0/article/details/78077037

以下列出13個jQuery操作table常用到的功能：

1.滑鼠移動行變色

[javascript] view plain copy

$('#table1 tr').hover(function(){
$(this).children('td').addClass('hover')
}, function(){
$(this).children('td').removeClass('hover')
});

[javascript]

view plain copy

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

2.奇偶行不同顏色 [javascript] view plain copy

$('#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.隱藏一行 [javascript] view plain copy

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

,this).hide()});

4.隱藏一列 [javascript] view plain copy

$('#table1 tr td::nth-child(3)').hide();

5.刪除一行 [javascript] view plain copy

// 刪除除第一行外的所有行
$('#table1 tr:not(:first)').remove();
// 刪除指定行
$('#table1 tr:eq(3)').remove();

6.刪除一列 [javascript] view plain copy

// 刪除除第一列外的所有列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 刪除第一列
$('#table1 tr td::nth-child(1)').remove();

7.得到（設定）某個單元格的值 [javascript] view plain copy

// 設定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.插入一行

[javascript] view plain copy

// 在第二個tr後插入一行
$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));

9.獲取每一行指定的單元格的值 [javascript] view plain copy

var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');

10.全選或全不選 [javascript] view plain copy

//方法零：
$('#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.客戶端動態新增行 [javascript] view plain copy

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>";
相關推薦

20170726 jQuery操作表格（table）的常用方法、技巧彙總

function btnAddRow(){     //行號是從0開始，最後一行是新增、刪除、儲存按鈕行故減去2     var rownum=$("#table1 tr").length-2;     var chk="<input type='checkbox' id='chk_"+rownu

jQuery操作表格（table）的常用方法、技巧彙總

轉自：https://blog.csdn.net/liaoxm0/article/details/78077037 以下列出13個jQuery操作table常用到的功能： 1.滑鼠移動行變色 [javascript] view plain copy

jquery（3）--常用方法

標簽效果 oct script 節點 orange 下標 log range $()下的常用方法： 1、has（）; 2、not（）; 3、filter(); 4、next(); 5、prev(); 6、find(); 7、eq(); 8、index(); 9、attr(

python 全棧開發：str（字串）常用方法操作、for 有限迴圈以及if 迴圈

str(字串)常用方法操作：首字母大寫： s = 'mylovepython' s1 = s.capitalize() print(s1) 輸出： Mylovepython 單行多字串首字母大寫： s = 'my love python' s2 = s.title(

Lua庫（math、string、table）常用方法集合

1) math庫 math.random(os.time())            隨機種子 os.time()表示當前時間，返回距離到現在的秒數，跟C++的time(NULL)一樣。 math.random()        --返回0-1之間的隨機數 math.ra

Bootstrap模態框（modal），並新增帶複選框的表格（table），還可做提示框、檔案選擇框等，很實用！

  Bootstrap中的模態框外掛以彈出對話方塊的形式出現，具有最小和最實用的功能集，主要的是使用起來很靈活！有以下幾個特性：（1）不支援同時開啟多個模態框；（2）務必將模態框的 HTML 程式碼放在文件的最高層級內（也就是說，儘量作為 body 標籤的直接子元素）

Bootstrap—輕鬆製作漂亮表格（table）

學習了runoob.com網站中的bootstrap內容之後，參照其中的內容自己做一下總結，以便幫助在這方面有疑惑的朋友，也有助於自己更好的消化所學的內容。我們應該慶幸自己活在這樣一個網際網路時代，

jQuery中的文件操作處理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>文件操作處理</title>

合併表格（Table）單元格

Imports ZwSoft.ZwCAD.Runtime Imports ZwSoft.ZwCAD.ApplicationServices Imports ZwSoft.ZwCAD.DatabaseServices Imports ZwSoft.ZwCAD.EditorIn

電子表格（SpreadSheet）主要屬性、方法和事件

Spreadsheet.XMLData     字串型別的屬性，可用來獲得或設定XML格式的電子表格內容。Spreadsheet.Range     該方法接受一個區域引用(例如A1:B2或A:B)，返回一個Range物件。Spreadsheet.ActiveSheet

jQuery操作Frame（iFrame）

<input type="hidden" id="suppId" value="" /> $(window.frames["frmHcInStorage"].document).find("#suppId").val(this.value()); consol

一天搞定CSS：表格（table）--19

1.表格標籤表格標籤的巢狀關係 <table>  <thead> 

Linux防火牆iptables的表格（table）與鏈（chain）

一 iptables的含義也就是IP表的意思，從軟體的名稱上體現了軟體的組成，iptables是由最基本的多個表（table）組成，而且每個表用途都不一樣，在每個表中，又定義了多個鏈（chain），通過這些鏈可以設定相應的規則和策略。二 iptables的表格和鏈 Filter（過濾器）：主要跟進入L

淺談表格（jq）的增、刪、改、查

false als 刪除 parse ++ script span 原生js true html代碼： <table border="1" cellpadding="20" cellspacing="0"> <thead> <t

Shell（二）常用命令和技巧

命令列一些技巧： * 表示任意字元（也可以無字元） ? 任意一個單字元 [a-z] 包含一個字元範圍中的任一字元 [^a-z] 不包含此範圍的字元 Tab鍵補齊命令名稱或其他名稱 history 重新輸入以前執行過的指令 !+序號

類的學習筆記（5）——靜態方法、類方法、例項方法及屬性方法的區別

python面試題：靜態方法、類方法、例項方法及屬性方法的區別？ 1、靜態方法：處理與這個類的邏輯關聯，該方法不可訪問例項屬性或類屬性。可以通過staticmethod裝飾器實現 2、類方法：與本類相關的，方法屬於類的，只能訪問類屬性，可以通過classmethod裝飾器實現。 3

jQuery原始碼解析（1）—— jq基礎、data快取系統

閒話 jquery 的原始碼已經到了1.12.0 版本，據官網說1版本和2版本若無意外將不再更新，3版本將做一個架構上大的調整。但估計能相容IE6-8的，也許這已經是最後的樣子了。我學習jq的時間很短，應該在1月，那時的版本還是1.11.3，通過看妙味課堂

jQuery原始碼解析（4）—— css樣式、定位屬性

閒話原計劃是沒有這篇博文的，研究animation原始碼的時候遇到了css樣式這個攔路虎。比如jQuery支援“+=10”、“+=10px”定義一個屬性的增量，但是有的屬性設定時可以支援數字，有的必須有單位；在對屬性當前值讀取時，不同的瀏覽器可能返回不同的單

python selenium系列（三）常用操作類型及方法

term src 依次 and cto color 自動化 off value 一前言開展WEB UI自動化的核心思路，無非就是找到元素，然後操作元素這兩個內容。在python selenium系列（二）元素定位方式一文中，已經介紹了如何找到元素這項技能，本文將介紹第二項

jQuery 學習筆記（3）（內容選擇器、attr方法、prop方法，類的操作）

節點 lec ddc 方法 pty 全部如果一個所有內容選擇器： 1、$("div:empty"): 空的div元素 2、$("div:parent"): 非空div元素 3、$("div:contains(text)"): 包含 text 文本（指定文本）的div

jQuery操作表格（table）的常用方法、技巧彙總

相關推薦