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