jquery 表格控件怎么使用

1、使用簡(jiǎn)單、擴(kuò)展方便。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、醴陵ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的醴陵網(wǎng)站制作公司

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

3、支持行點(diǎn)擊事件自定義。

4、支持復(fù)選框選擇行。

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

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

7、支持自定義數(shù)據(jù)的顯示樣式（根據(jù)當(dāng)前數(shù)據(jù)或當(dāng)前行數(shù)據(jù)）

8、支持分頁(yè)顯示數(shù)據(jù)，且在插件內(nèi)部實(shí)現(xiàn)分頁(yè)處理。

二、使用說(shuō)明

該插件的使用，基本只需兩個(gè)步驟即可，一個(gè)是表格的聲明（創(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: "暫無(wú)數(shù)據(jù)", //(string)無(wú)數(shù)據(jù)時(shí)的提示信息

renderTo: "", //(string)表格容器，必須是HTML元素的ID屬性值

model: 'remote', //(string)模式，遠(yuǎn)程(remote)or本地(local)

url: '', //(string)遠(yuǎn)程模式的獲取數(shù)據(jù)的url地址

allowPaging: true, (bool)//是否分頁(yè)

pageSize: 20, //(int)每頁(yè)顯示的行數(shù)

checkSelected: false, //(bool)復(fù)選框選擇

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

stripeRows: false, //(bool)是否啟用隔行變色 默認(rèn)不啟用

onRowClick: null //(function)行點(diǎn)擊事件

});

2、表格數(shù)據(jù)的加載

objTable.loadData(1,data);//第一個(gè)參數(shù)為加載頁(yè)的頁(yè)索引，第二個(gè)參數(shù)有兩種情況，1：如果參數(shù)內(nèi)容是JSON對(duì)象，則表示是查詢的查詢條件，如果是數(shù)據(jù)，則表示直接加載本地?cái)?shù)據(jù)到表格中。

jQuery實(shí)現(xiàn)的可編輯表格完整實(shí)例

本文實(shí)例講述了jQuery實(shí)現(xiàn)的可編輯表格。分享給大家供大家參考，具體如下：

!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01//EN"

""

html

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

title可編輯表格/title

script

type

=

"text/javascript"

src="jquery-1.7.2.min.js"/script

style

type

=

"text/css"

body{

background:#c0c0c0;

}

#tab{

border-collapse:collapse;

}

#tab

td{

width:50px;

height:18px;

border:1px

solid;

text-align:center;

}

/style

script

type

=

"text/javascript"

$(function(){

var

tds

=

$("#tab

tr

td");

editeTable(tds);

});

function

editeTable(tds){

tds.click(function(){

var

td=$(this);

var

oldText=td.text();

var

input=$("input

type='text'

value='"+oldText+"'/");

td.html(input);

input.click(function(){

return

false;

});

input.css("border-width","1px");

input.css("font-size","12px");

input.css("text-align","center");

input.css("width","0px");

input.width(td.width());

input.trigger("focus").trigger("select");

input.blur(function(){

td.html(oldText);

});

input.keyup(function(event){

var

keyEvent=event

||

window.event;

var

key=keyEvent.keyCode;

var

input_blur=$(this);

switch(key)

{

case

13:

var

newText=input_blur.val();

td.html(newText);

changeCurrConAttrByTable(currTableId);

break;

case

27://按下esc鍵，取消修改，把文本框變成文本

td.html(oldText);

break;

}

});

});

};

/script

/head

body

table

id

=

"tab"

tr

td1/tdtd1/tdtd1/tdtd1/tdtd1/td

/tr

tr

td1/tdtd1/tdtd1/tdtd1/tdtd1/td

/tr

tr

td1/tdtd1/tdtd1/tdtd1/tdtd1/td

/tr

tr

td1/tdtd1/tdtd1/tdtd1/tdtd1/td

/tr

tr

td1/tdtd1/tdtd1/tdtd1/tdtd1/td

/tr

/table

/body

/html

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

jQuery操作table表格

一、數(shù)據(jù)準(zhǔn)備

二、操作

//1.鼠標(biāo)移動(dòng)行變色

$("#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è)置）某個(gè)單元格的值

//設(shè)置table7,第2個(gè)tr的第一個(gè)td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html("value");

//獲取table7,第2個(gè)tr的第一個(gè)td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html();

//8.插入一行：

//在第二個(gè)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表,jquery表格隔行變色
鏈接分享：http://chinadenli.net/article29/dsejcjh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)、建站公司、網(wǎng)頁(yè)設(shè)計(jì)公司、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)