基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
更新時(shí)間：2011年01月12日 16:34:49 作者：
我們就中和下利用JQuery來(lái)和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用
web前端開發(fā)的時(shí)候經(jīng)常會(huì)遇到要做表單的頁(yè)面或者做一些表格的效果如相同內(nèi)容要同一個(gè)單元格里面顯示，一般的方法是table里面在套table但是這種方法會(huì)增加頁(yè)面的負(fù)擔(dān)影響頁(yè)面加載速度但是如果用DIV有不好控制寫的css樣式要很多，那怎么辦呢？我們就中和下利用JQuery來(lái)和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用，如下：
頭部JQuery代碼
<script type="text/javascript">
jQuery.fn.rowspan = function(colIdx) { //封裝的一個(gè)JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
$(function() {
$(“#table1″).rowspan(0);//傳入的參數(shù)是對(duì)應(yīng)的列數(shù)從0開始，哪一列有相同的內(nèi)容就輸入對(duì)應(yīng)的列數(shù)值
$(“#table1″).rowspan(2);
});
</script>
在body里面加入一個(gè)表格
<body>
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>f</td>
<td>3</td>
<td>s</td>
</tr>
</table>
</body>
頭部JQuery代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery.fn.rowspan = function(colIdx) { //封裝的一個(gè)JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
$(function() {
$(“#table1″).rowspan(0);//傳入的參數(shù)是對(duì)應(yīng)的列數(shù)從0開始，哪一列有相同的內(nèi)容就輸入對(duì)應(yīng)的列數(shù)值
$(“#table1″).rowspan(2);
});
</script>
在body里面加入一個(gè)表格
復(fù)制代碼 代碼如下:
<body>
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>f</td>
<td>3</td>
<td>s</td>
</tr>
</table>
</body>
IE效果 
火狐效果 
更多的前端開發(fā)可以關(guān)注 UI前端
您可能感興趣的文章:
- 基于jquery的合并table相同單元格的插件(精簡(jiǎn)版)
- jquery 動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法
- 合并table相同單元格的jquery插件分享(很精簡(jiǎn))
- jquery miniui 教程 表格控件 合并單元格應(yīng)用
- JQuery實(shí)現(xiàn)表格中相同單元格合并示例代碼
- jQuery實(shí)現(xiàn)HTML表格單元格的合并功能
- 基于jQuery的合并表格中相同文本的相鄰單元格的代碼
- 使用jQuery 操作table 完成單元格合并的實(shí)例
- jquery 合并內(nèi)容相同的單元格(示例代碼)
- jquery合并表格中相同文本的相鄰單元格
- jQuery實(shí)現(xiàn)合并表格單元格中相同行操作示例
相關(guān)文章
jquery實(shí)現(xiàn)放大鏡簡(jiǎn)潔代碼(推薦)
這篇文章主要介紹了jquery實(shí)現(xiàn)放大鏡簡(jiǎn)潔代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
純jquery實(shí)現(xiàn)模仿淘寶購(gòu)物車結(jié)算
在淘寶購(gòu)物，需要把商品加入購(gòu)車，其中包含全選、單選金額改變，當(dāng)增加商品時(shí)金額也會(huì)相應(yīng)的發(fā)生變化，下面通過(guò)本文給大家分享純jquery實(shí)現(xiàn)模仿淘寶購(gòu)物車結(jié)算，需要的朋友可以參考下2015-08-08
tab切換，是一個(gè)很常見的效果，今天在項(xiàng)目中遇到這樣一個(gè)問(wèn)題。就是切換后，頁(yè)面刷新，又重新定位到第一個(gè)上了，很是郁悶2012-05-05
jQuery之所以如此流行并被從大公司到個(gè)人博客的幾乎每個(gè)人都廣泛使用，是因?yàn)樗鲜趾褪褂孟喈?dāng)簡(jiǎn)單，而且為我們提供了一些人都不知道的相當(dāng)棒的特性。2010-01-01
動(dòng)態(tài)設(shè)置form表單的action屬性的值的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)設(shè)置form表單的action屬性的值的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
jquery animate 動(dòng)畫效果使用說(shuō)明
jquery animate 動(dòng)畫效果使用說(shuō)明，需要的朋友可以參考下。2009-11-11
$.ajax下json數(shù)據(jù)的傳遞方法，大家可以參考下。這樣就可以傳遞json數(shù)據(jù)了2008-11-11
jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播效果
本文給大家介紹的是使用jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播切換特效，效果非常棒，有需要的小伙伴可以參考下。2015-04-04
jQuery實(shí)現(xiàn)移動(dòng)端扭蛋機(jī)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)移動(dòng)端扭蛋機(jī)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11