jquery表,jquery表格展開和折疊
jQuery操作table表格
一、數(shù)據(jù)準(zhǔn)備
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的來賓網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
二、操作
//1.鼠標(biāo)移動行變色
$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})
$("#table2 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});
//2.奇偶行不同顏色
$("#table3 tbody tr:odd").css("background-color", "#bbf");
$("#table3 tbody tr:even").css("background-color","#ffc");
$("#table3 tbody tr:odd").addClass("odd")
$("#table3 tbody tr:even").addClass("even")
//3.隱藏一行
$("#table3 tbody tr:eq(3)").hide();
//4.隱藏一列
$("#table5 tr td::nth-child(3)").hide();
$("#table5 tr").each(function(){$("td:eq(3)",this).hide()});
//5.刪除一行
// 刪除除第一行外的所有行
$("#table6 tr:not(:first)").remove();
//6.刪除一列
// 刪除除第一列外的所有列
$("#table6 tr td:not(:nth-child(1))").remove();
//7.得到（設(shè)置）某個單元格的值
//設(shè)置table7,第2個tr的第一個td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html("value");
//獲取table7,第2個tr的第一個td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html();
//8.插入一行：
//在第二個tr后插入一行
$("插入3插入插入插入").insertAfter($("#table7 tr:eq(1)"));
//刪除指定行（第二行） $("#table3 tr:gt(0):eq(1)").remove();
(2)刪除列，比如刪除表格中的第二列：
//eq:獲取子元素索引從 0 開始，先刪除表頭$("#table3 tr th:eq(1)").remove();//nth-child:獲取子元素從 1 開始$("#table3 tr td:nth-child(2)").remove();
(3)刪除其它行，比如第二行之外的所有行：
$("#table3 tr:gt(0):not(:eq(1))").remove();
(4)刪除其它列，比如第二列之外的所有列：
//先刪除表頭$("#table3 tr th:not(:eq(1))").remove();$("#table3 tr td:not(:nth-child(2))").remove();
(5)隱藏行，比如隱藏第二行：
$("#table3 tr:gt(0):eq(1)").hide();//或者//$("#table3 tr:gt(0):eq(1)").css("display", "none")//顯示//$("#table3 tr:gt(0):eq(1)").css("display", "");
(6)隱藏列，比如隱藏第二列：
$("#table3 tr th:eq(1)").hide();
$("#table3 tr td:nth-child(2)").hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//顯示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");
jquery 獲取 table 總行數(shù)：
$("table tr").size();
var hang = $("#g").find("tr").length;
jquery 獲取 table 總列數(shù)：
$("table td").size();
var lie = $("#g").find("tr").find("td").length-1;
jquery 表格控件怎么使用
1、使用簡單、擴展方便。
2、表格樣式可自定義，只需修改相應(yīng)的CSS樣式即可。
3、支持行點擊事件自定義。
4、支持復(fù)選框選擇行。
5、執(zhí)行列排序（支持數(shù)字、日期時間、英文、漢字等）。
6、支持自定義行按鈕及按鈕事件（如編輯、刪除按鈕等）
7、支持自定義數(shù)據(jù)的顯示樣式（根據(jù)當(dāng)前數(shù)據(jù)或當(dāng)前行數(shù)據(jù)）
8、支持分頁顯示數(shù)據(jù)，且在插件內(nèi)部實現(xiàn)分頁處理。
二、使用說明
該插件的使用，基本只需兩個步驟即可，一個是表格的聲明（創(chuàng)建），然后就是數(shù)據(jù)的加載。
1、表格的聲明（創(chuàng)建）
var objTable = new HyTable({
columns: [
{name: '姓名', mapping: 'username', type: 'string', width: '100', allowSort: true, renderer: function(val){return val;}}
], //(array)列信息
emptyMsg: "暫無數(shù)據(jù)", //(string)無數(shù)據(jù)時的提示信息
renderTo: "", //(string)表格容器，必須是HTML元素的ID屬性值
model: 'remote', //(string)模式，遠程(remote)or本地(local)
url: '', //(string)遠程模式的獲取數(shù)據(jù)的url地址
allowPaging: true, (bool)//是否分頁
pageSize: 20, //(int)每頁顯示的行數(shù)
checkSelected: false, //(bool)復(fù)選框選擇
selectedField: "", //(string)復(fù)選框選中字段
stripeRows: false, //(bool)是否啟用隔行變色 默認不啟用
onRowClick: null //(function)行點擊事件
});
2、表格數(shù)據(jù)的加載
objTable.loadData(1,data);//第一個參數(shù)為加載頁的頁索引，第二個參數(shù)有兩種情況，1：如果參數(shù)內(nèi)容是JSON對象，則表示是查詢的查詢條件，如果是數(shù)據(jù)，則表示直接加載本地數(shù)據(jù)到表格中。
jquery怎么動態(tài)實現(xiàn)表格分頁
jquery動態(tài)實現(xiàn)表格分頁的方法是利用自帶的分頁插件jQuery.page.js。
下面是使用方法：
$(".tcdPageCode").createPage({
? pageCount:10,
? current:1,
? backFn:function(p){
? ? ? //單擊回調(diào)方法，p是當(dāng)前頁碼
? }
});
pageCount：總頁數(shù)
current：當(dāng)前頁
實現(xiàn)分頁的tab如下：
div class="tcdPageCode"
span class="disabled"上一頁/span
span class="current"1/span
a href="javascript:;" class="tcdNumber"2/a
a href="javascript:;" class="tcdNumber"3/a
a href="javascript:;" class="tcdNumber"4/a
span.../span
a href="javascript:;" class="tcdNumber"6/aa href="javascript:;" class="nextPage"下一頁/a/div
實現(xiàn)效果：
新聞名稱：jquery表,jquery表格展開和折疊
URL標(biāo)題：http://m.jiaotiyi.com/article/phhssi.html