jquery 表格控件怎么使用

1、使用簡單、擴展方便。

成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務鄂托克前,10年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

2、表格樣式可自定義，只需修改相應的CSS樣式即可。

3、支持行點擊事件自定義。

4、支持復選框選擇行。

5、執(zhí)行列排序（支持數(shù)字、日期時間、英文、漢字等）。

6、支持自定義行按鈕及按鈕事件（如編輯、刪除按鈕等）

7、支持自定義數(shù)據(jù)的顯示樣式（根據(jù)當前數(shù)據(jù)或當前行數(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)復選框選擇

selectedField: "", //(string)復選框選中字段

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如何遍歷表格

var arr1 = $("#表格").find("tr");//得到table中包含頭部的所有tr

var arr2 = $("#表格 tbody").find("tr");//得到table中tbody中的所有tr

var arr3 = $("#表格 thead").find("tr");//得到table中thead中的所有tr

上面都是集合，

$.each(arr1,function(i){

console.log(arr1.eq(i).html())

})

jQuery怎樣選擇表格中每一行的第一列

選擇表格中每一行的第一列可以使用jquery的遍歷實現(xiàn)$("table

tr").each(function()

{

//

遍歷每一行

$(this).children('td:eq(0)');

//

td:eq(0)選擇器表示第一個單元格});下面給出實例演示：點擊按鈕后表格的第一列將被加上背景色創(chuàng)建Html代碼

...

如何用jquery改變表格單元格的內(nèi)容

var td=$("#你這個單元格的id");//當然了，這只是id選擇器去獲取標簽對象，還有其他很多選擇器！

$(td).html("你要改變的內(nèi)容");

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是當前頁碼

? }

});

pageCount：總頁數(shù)

current：當前頁

實現(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如何實現(xiàn)一個表格的篩選,也就是按條件查找篩選

使用jquery的each()方法遍歷單元格，如果滿足條件則進行相應的操作

$(selector).each(function(index,element))

實例演示：在表格中按姓名查找記錄，找到則突出顯示，否則給出提示

創(chuàng)建Html元素

div?class="box"

span實例演示：在表格中按姓名查找記錄/spanbr

div?class="content"

姓名:nbsp;input?type="text"?name="name"nbsp;input?type="button"?value="查找"

table

trtd張三/tdtd175/tdtd140/td/tr

trtd李四/tdtd170/tdtd120/td/tr

trtd王五/tdtd185/tdtd160/td/tr

/table

/div

/div

設置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}

input[type='text']{width:100px;padding:5px?10px;margin:5px?0;border:1px?solid?#ff9966;}

input[type='button']{height:30px;margin:10px;padding:5px?10px;}

table{border-collapse:collapse;}

td{width:80px;height:30px;line-height:30px;text-align:center;border:1px?solid?green;}

.selected{font-weight:bold?!important;?background:?#ff99cc?!important;color:#fff;}

編寫jquery代碼

$(function(){?

$(":button").click(function()?{

$("table?tr").removeClass('selected');???//?還原樣式

name?=?$("input[name='name']").val();????//?要查找的名字

flag?=?true;?????????????????????????????//?表示未查到目標

$("table?tr").find("td:first").each(function()?{

if($(this).html()==name){????????????//?如果找到了

$(this).parent("tr").addClass('selected');????//?為整行設置樣式

flag?=?false;????????????????????//?將未找到標記設為false

return?false;????????????????????//?提前終止循環(huán)

}

});

if(flag)?????????????????????????????????//?如果沒找到就給出提示

alert("查無此人");??

});

});

觀察效果

如果表中有相應記錄

如果表中并無相應記錄