BootStrap table表格插件自適應(yīng)固定表頭(超好用)
首先是簡(jiǎn)單的頁(yè)面形式,大家可以按照平常畫(huà)表格的方式來(lái)創(chuàng)建html表格,然后通過(guò)js控制特殊的樣式等操作(優(yōu)點(diǎn)是表格更加直觀,方便調(diào)整表格樣式等,速度快)
當(dāng)然,也可以只在頁(yè)面上放一個(gè)table標(biāo)簽,之后的所有數(shù)據(jù)和樣式都通過(guò)js控制也是可以的,后面會(huì)說(shuō)(優(yōu)點(diǎn)方便控制修改數(shù)據(jù),尤其是ajax方式獲取的json格式,但是調(diào)整樣式比較麻煩)
ps:這個(gè)是插件的官網(wǎng),里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
還有,使用前請(qǐng)引入bootstrap的相關(guān)css,js,jQuery,以及bootstrap-table的css,js至少這5個(gè)基本文件
一,html表格方式
例一:需求,簡(jiǎn)單的表格數(shù)據(jù)呈現(xiàn),表頭是兩行,還有一個(gè)上下浮的箭頭
分析:很簡(jiǎn)單,只需要html就可以實(shí)現(xiàn),按照常規(guī)的表格來(lái)畫(huà),添加上bootstrap-table獨(dú)有的自定義屬性即可,注意如果不使用js請(qǐng)?jiān)谧铋_(kāi)始的table標(biāo)簽中加上data-toggle
html代碼:
<div> <table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL01"> <thead> <tr> <th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">來(lái)耗存</th> <th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">當(dāng)日</th> <th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">本周</th> <th data-field="by" data-colspan="3" data-align="center" data-valign="middle">本月</th> </tr> <tr> <th data-field="drbq" data-align="center" data-valign="middle">本期</th> <th data-field="drtb" data-align="center" data-valign="middle">同比</th> <th data-field="drhb" data-align="center" data-valign="middle">環(huán)比</th> <th data-field="bzbq" data-align="center" data-valign="middle">本期</th> <th data-field="bztb" data-align="center" data-valign="middle">同比</th> <th data-field="bzhb" data-align="center" data-valign="middle">環(huán)比</th> <th data-field="bybq" data-align="center" data-valign="middle">本期</th> <th data-field="bytb" data-align="center" data-valign="middle">同比</th> <th data-field="byhb" data-align="center" data-valign="middle">環(huán)比</th> </tr> </thead> <tbody> <tr> <td>來(lái)煤量</td> <td>21341</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>334322</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>3125113</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>來(lái)煤量</td> <td>76573</td> <td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>1.45</td> <td>234534</td> <td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.75</td> <td>44225</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.74</td> <td><i class='glyphicon glyphicon-arrow-up'></i>3.45</td> </tr> <tr> <td>耗煤量</td> <td>43363</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>32422</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>13345</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>來(lái)煤量</td> <td>34624</td> <td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td> <td><i class='glyphicon glyphicon-arrow-up'></i>1.23</td> <td>452346</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.32</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.05</td> <td>94524</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>334322</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>3125113</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>334322</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>3125113</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>334322</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>3125113</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>334322</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>3125113</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>334322</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>3125113</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td> <td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td> <td>334322</td> <td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td> <td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td> <td>3125113</td> <td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td> <td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td> </tr> </tbody> </table> </div>
例二:需求,第二個(gè)表格后面有個(gè)顯示進(jìn)度的自定義單元格,并且第一行要求是做一個(gè)合計(jì)的統(tǒng)計(jì)展示,這兩個(gè)功能需要用js來(lái)設(shè)定自定義行列
html代碼:
<div> <table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL02"> <thead> <tr> <th data-field="id" data-align="center" data-valign="middle">序號(hào)</th> <th data-field="gys" data-align="center" data-valign="middle">供應(yīng)商</th> <th data-field="pz" data-align="center" data-valign="middle">品種</th> <th data-field="rz" data-align="center" data-valign="middle">熱值</th> <th data-field="mj" data-align="center" data-valign="middle">煤價(jià)</th> <th data-field="bmdj" data-align="center" data-valign="middle">標(biāo)煤?jiǎn)蝺r(jià)</th> <th data-field="drlm" data-align="center" data-valign="middle">當(dāng)日來(lái)煤</th> <th data-field="ljlm" data-align="center" data-valign="middle">累計(jì)來(lái)煤</th> <th data-field="yjhl" data-align="center" data-valign="middle">月計(jì)劃量</th> <th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">月計(jì)劃完成進(jìn)度</th> </tr> </thead> <tbody> <tr> <td>2</td> <td>雙欣礦業(yè)</td> <td>低硫煤</td> <td></td> <td></td> <td></td> <td></td> <td>6686.08</td> <td>30000</td> <td>22%</td> </tr> <tr> <td>3</td> <td>伊泰股份</td> <td>工程煤</td> <td></td> <td></td> <td></td> <td></td> <td>51888.72</td> <td>70000</td> <td>74%</td> </tr> <tr> <td>4</td> <td>嘉遠(yuǎn)公司</td> <td>中高硫煤</td> <td></td> <td></td> <td></td> <td></td> <td>20041.86</td> <td>90000</td> <td>100%</td> </tr> <tr> <td>5</td> <td>愛(ài)地能源</td> <td>低硫煤</td> <td></td> <td></td> <td></td> <td></td> <td>5191.08</td> <td>30000</td> <td>0%</td> </tr> <tr> <td>6</td> <td>恒泰煤炭</td> <td>中高硫煤</td> <td></td> <td></td> <td></td> <td></td> <td>18265.56</td> <td>0</td> <td>22%</td> </tr> <tr> <td>7</td> <td>雙欣礦業(yè)</td> <td>低硫煤</td> <td></td> <td></td> <td></td> <td></td> <td>6686.08</td> <td>30000</td> <td>22%</td> </tr> <tr> <td>8</td> <td>雙欣礦業(yè)</td> <td>低硫煤</td> <td></td> <td></td> <td></td> <td></td> <td>6686.08</td> <td>30000</td> <td>22%</td> </tr> <tr> <td>9</td> <td>雙欣礦業(yè)</td> <td>低硫煤</td> <td></td> <td></td> <td></td> <td></td> <td>6686.08</td> <td>30000</td> <td>22%</td> </tr> </tbody> </table> </div>
js代碼:
//聲明用來(lái)統(tǒng)計(jì)合計(jì)(累計(jì)來(lái)煤,月計(jì)劃)的變量
var yjhArr=[];
var ljlmArr=[];
//顯示進(jìn)度條的自定義列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:"+width+"%;height:100%;background-color:"+<br> (width>=100?red:blue)+";'>"+value+"</span></div>"
}
//計(jì)算合計(jì)數(shù)值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i<yjhArr.length;i++){
if(yjhArr[i]==""){
yjhArr[i]=0;
}
subyjh+=parseFloat(yjhArr[i]);
}
for(var j=0;j<ljlmArr.length;j++){
if(ljlmArr[j]==""){
ljlmArr[j]=0;
}
subljlm+=parseFloat(ljlmArr[j]);
}
row.push({
id:1,
gys:'合計(jì)',
pz:'',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:subljlm.toFixed(2),
yjhl:subyjh,
yjhjd:'107%'
});
return row
}
分析:自定義行列需要添加data-formatter=‘方法名',其中progress()方法中的參數(shù)row,會(huì)在表格生成行的時(shí)候每生成一行就執(zhí)行一次并將該行的對(duì)象傳進(jìn)來(lái)。
二:js方式
通過(guò)這種方法,可以很方便的為表格設(shè)置參數(shù),處理數(shù)據(jù)方面十分便捷,尤其是設(shè)置請(qǐng)求方式和地址時(shí),不過(guò)這個(gè)項(xiàng)目暫時(shí)只是靜態(tài)頁(yè)面,有關(guān)數(shù)據(jù)的以后接觸在寫(xiě)上來(lái)
例一:同上例一
html:
<div> <table class="table table-striped table-bordered table-hover" id="tableL01"></table> </div>
js:
//表格插件(表一)開(kāi)始
$('#tableL01').bootstrapTable({
height:268,
//模擬數(shù)據(jù)
columns: [[{
align:'center',
valign:'middle',
field: 'lhc',
title: '來(lái)耗存',
rowspan:2
}, {
align:'center',
valign:'middle',
field: 'dr',
title: '當(dāng)日',
colspan:3
}, {
align:'center',
valign:'middle',
field: 'bz',
title: '本周',
colspan:3
},{
align:'center',
valign:'middle',
field: 'by',
title: '本月',
colspan:3}],
[{
align:'center',
valign:'middle',
field: 'drbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'drtb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'drhb',
title: '環(huán)比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bzbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bztb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'bzhb',
title: '環(huán)比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bybq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bytb',
title: '同比',
formatter:trend},{
align:'center',
valign:'middle',
field: 'byhb',
title: '環(huán)比',
formatter:trend
}]],
data:[{
id:1,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:2,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:3,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:4,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:5,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:6,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:7,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:8,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:9,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:10,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:11,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:12,
lhc:'來(lái)存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
}]});
//模擬數(shù)據(jù)結(jié)束
//上下浮動(dòng)箭頭樣式添加
function trend(value,row){
var trendIcon=row.id%2===0?'glyphicon glyphicon-arrow-down':'glyphicon glyphicon-arrow-up';
return "<i class='"+trendIcon+"'></ i>"+value
}
//表格插件一結(jié)束
分析:$('#tableL01').bootstrapTable({})是插件開(kāi)始的標(biāo)志,在其中添加表格的參數(shù),然后在data:是表格的數(shù)據(jù),而columns中則是設(shè)置列參數(shù)以及表格數(shù)據(jù)的地方,其中這個(gè)項(xiàng)目有代表性的是表頭分為兩部分,因此需要在columns中加兩個(gè)數(shù)組【{}】,【{}】。之前都寫(xiě)在一個(gè)數(shù)組里,而源代碼遍歷的是columns的length
例二:
html相同都是只需要一個(gè)帶id的table標(biāo)簽即可
js:
//表格插件(表二)開(kāi)始
//聲明用來(lái)統(tǒng)計(jì)合計(jì)(累計(jì)來(lái)煤,月計(jì)劃)的變量
var yjhArr=[];
var ljlmArr=[];
$('#tableL02').bootstrapTable({
height:268,
//模擬數(shù)據(jù)
columns: [{
align:'center',
valign:'middle',
field: 'id',
title: '序號(hào)'
}, {
align:'center',
valign:'middle',
field: 'gys',
title: '供應(yīng)商'
}, {
align:'center',
valign:'middle',
field: 'pz',
title: '品種'
},{
align:'center',
valign:'middle',
field: 'rz',
title: '熱值'
},{
align:'center',
valign:'middle',
field: 'mj',
title: '煤價(jià)'
},{
align:'center',
valign:'middle',
field: 'bmdj',
title: '標(biāo)煤?jiǎn)蝺r(jià)'
},{
align:'center',
valign:'middle',
field: 'drlm',
title: '當(dāng)日來(lái)煤'
},{
align:'center',
valign:'middle',
field: 'ljlm',
title: '累計(jì)來(lái)煤'
},{
align:'center',
valign:'middle',
field: 'yjhl',
title: '月計(jì)劃量'
},{
align:'center',
valign:'middle',
field: 'yjhjd',
title: '月計(jì)劃完成進(jìn)度',
formatter:progress
}],
data:[{
id:2,
gys:'雙欣礦業(yè)',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'6686.08',
yjhl:'30000',
yjhjd:'22%'
},{
id:3,
gys:'伊泰股份',
pz:'工程煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'51888.72',
yjhl:'70000',
yjhjd:'74%'
},{
id:4,
gys:'嘉遠(yuǎn)公司',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'20041.86',
yjhl:'90000',
yjhjd:'100%'
},{
id:5,
gys:'愛(ài)地能源',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'5191.08',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
}
]});
//模擬數(shù)據(jù)結(jié)束
//顯示進(jìn)度條的自定義列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:"+width+"%;height:100%;background-color:"+(width>=100?red:blue)+";'>"+value+"</span></div>"
}
//計(jì)算合計(jì)數(shù)值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i<yjhArr.length;i++){
if(yjhArr[i]==""){
yjhArr[i]=0;
}
subyjh+=parseFloat(yjhArr[i]);
}
for(var j=0;j<ljlmArr.length;j++){
if(ljlmArr[j]==""){
ljlmArr[j]=0;
}
subljlm+=parseFloat(ljlmArr[j]);
}
row.push({
id:1,
gys:'合計(jì)',
pz:'',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:subljlm,
yjhl:subyjh,
yjhjd:'107%'
});
return row
}
這個(gè)其實(shí)和第一種方式差別不大,只不過(guò)把自定義列放在數(shù)據(jù)中設(shè)置罷了。比較好理解。而關(guān)于其他參數(shù)可以參考官網(wǎng),數(shù)據(jù)是動(dòng)態(tài)的如何添加網(wǎng)上也有不少例子,只要都放在.bootstrapTable({})中就可以了
以上所述是小編給大家介紹的BootStrap table表格插件自適應(yīng)固定表頭(超好用),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery 重復(fù)加載錯(cuò)誤以及修復(fù)方法
本文主要記錄了在項(xiàng)目中遇到j(luò)Query重復(fù)加載導(dǎo)致依賴jQuery的js全部失效然后一步步分析,得出最終解決方案的全部過(guò)程,主要是記錄下來(lái),提醒自己以后不要再犯相同錯(cuò)誤。2014-12-12
jQuery操作元素的內(nèi)容和樣式完整實(shí)例分析
這篇文章主要介紹了jQuery操作元素的內(nèi)容和樣式,結(jié)合完整實(shí)例形式分析了jquery針對(duì)頁(yè)面元素內(nèi)容與樣式相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
JQuery的ajax基礎(chǔ)上的超強(qiáng)GridView展示
前面有個(gè)例子是使用jQuery的datatable插件來(lái)實(shí)現(xiàn)的能夠展開(kāi)個(gè)詳細(xì)信息表的樣子。事實(shí)上.net的數(shù)據(jù)展示模式很好,如果配上jQuery的那些效果和AJAX功能是相當(dāng)?shù)貌诲e(cuò)。2009-09-09
jQuery構(gòu)造函數(shù)init參數(shù)分析
這篇文章主要介紹了jQuery構(gòu)造函數(shù)init參數(shù)分析,今天主要是分析一下jQuery中init選擇器構(gòu)造函數(shù),處理選擇器函數(shù)中的參數(shù),感興趣的朋友可以了解下2015-05-05
jQuery插件實(shí)現(xiàn)表格隔行換色且感應(yīng)鼠標(biāo)高亮行變色
實(shí)現(xiàn)表格隔行換色,且感應(yīng)鼠標(biāo)行變色的方法有很多,在本文將為大家介紹的是使用jQuery插件來(lái)實(shí)現(xiàn),具體如下,感興趣的朋友可以練練手2013-09-09
jquery事件preventDefault()方法用法實(shí)例
這篇文章主要介紹了jquery事件preventDefault()方法用法,實(shí)例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以參考下2015-01-01

