獲取值的方式是對(duì)的
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比隆林網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式隆林網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋隆林地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。
用個(gè)固定的位置示例:
if (tb.rows[0].cells[0].innerHTML == tb.rows[1].cells[0].innerHTML) {
//偽代碼
tb.rows[1].deleteCell(0)
tb.rows[0].cells[0].rowspan =2
}
[img]效果如下
原表格:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
SuZhou
33333
44444
SuZhouCity
SuZhou
55555
66666
SuZhouCity
ShangHai
77777
88888
ShangHaiCity
ShangHai
uuuuu
hhhhh
ShangHaiCity
ShangHai
ggggg
ccccc
ShangHaiCity
GuangZhou
ttttt
eeeee
GuangZhouCity
GuangZhou
ppppp
qqqqq
GuangZhouCity
處理之后的樣子:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
33333
44444
55555
66666
ShangHai
77777
88888
ShangHaiCity
uuuuu
hhhhh
ggggg
ccccc
GuangZhou
ttttt
eeeee
GuangZhouCity
ppppp
qqqqq
效果出來(lái),
看上去比較簡(jiǎn)單,
下面先看下頁(yè)面
復(fù)制代碼
代碼如下:
table
id="process"
cellpadding="2"
cellspacing="0"
border="1"
thead
tr
tdcol0/td
tdcol1/td
tdcol2/td
tdcol3/td
/tr
/thead
tbody
tr
tdSuZhou/td
td11111/td
td22222/td
tdSuZhouCity/td
/tr
tr
tdSuZhou/td
td33333/td
td44444/td
tdSuZhouCity/td
/tr
tr
tdSuZhou/td
td55555/td
td66666/td
tdSuZhouCity/td
/tr
tr
tdShangHai/td
td77777/td
td88888/td
tdShangHaiCity/td
/tr
tr
tdShangHai/td
tduuuuu/td
tdhhhhh/td
tdShangHaiCity/td
/tr
tr
tdShangHai/td
tdggggg/td
tdccccc/td
tdShangHaiCity/td
/tr
tr
tdGuangZhou/td
tdttttt/td
tdeeeee/td
tdGuangZhouCity/td
/tr
tr
tdGuangZhou/td
tdppppp/td
tdqqqqq/td
tdGuangZhouCity/td
/tr
/tbody
/table
核心代碼:
復(fù)制代碼
代碼如下:
//
這里寫成了一個(gè)jquery插件的形式
$('#process').mergeCell({
//
目前只有cols這么一個(gè)配置項(xiàng),
用數(shù)組表示列的索引,從0開(kāi)始
//
然后根據(jù)指定列來(lái)處理(合并)相同內(nèi)容單元格
cols:
[0,
3]
});
下面看看這個(gè)小插件的完整代碼:
復(fù)制代碼
代碼如下:
;(function($)
{
//
看過(guò)jquery源碼就可以發(fā)現(xiàn)$.fn就是$.prototype,
只是為了兼容早期版本的插件
//
才保留了jQuery.prototype這個(gè)形式
$.fn.mergeCell
=
function(options)
{
return
this.each(function()
{
var
cols
=
options.cols;
for
(
var
i
=
cols.length
-
1;
cols[i]
!=
undefined;
i--)
{
//
fixbug
console調(diào)試
//
console.debug(cols[i]);
mergeCell($(this),
cols[i]);
}
dispose($(this));
});
};
//
如果對(duì)javascript的closure和scope概念比較清楚,
這是個(gè)插件內(nèi)部使用的private方法
//
具體可以參考本人前一篇隨筆里介紹的那本書(shū)
function
mergeCell($table,
colIndex)
{
$table.data('col-content',
'');
//
存放單元格內(nèi)容
$table.data('col-rowspan',
1);
//
存放計(jì)算的rowspan值
默認(rèn)為1
$table.data('col-td',
$());
//
存放發(fā)現(xiàn)的第一個(gè)與前一行比較結(jié)果不同td(jQuery封裝過(guò)的),
默認(rèn)一個(gè)"空"的jquery對(duì)象
$table.data('trNum',
$('tbody
tr',
$table).length);
//
要處理表格的總行數(shù),
用于最后一行做特殊處理時(shí)進(jìn)行判斷之用
//
我們對(duì)每一行數(shù)據(jù)進(jìn)行"掃面"處理
關(guān)鍵是定位col-td,
和其對(duì)應(yīng)的rowspan
$('tbody
tr',
$table).each(function(index)
{
//
td:eq中的colIndex即列索引
var
$td
=
$('td:eq('
+
colIndex
+
')',
this);
//
取出單元格的當(dāng)前內(nèi)容
var
currentContent
=
$td.html();
//
第一次時(shí)走此分支
if
($table.data('col-content')
==
'')
{
$table.data('col-content',
currentContent);
$table.data('col-td',
$td);
}
else
{
//
上一行與當(dāng)前行內(nèi)容相同
if
($table.data('col-content')
==
currentContent)
{
//
上一行與當(dāng)前行內(nèi)容相同則col-rowspan累加,
保存新值
var
rowspan
=
$table.data('col-rowspan')
+
1;
$table.data('col-rowspan',
rowspan);
//
值得注意的是
如果用了$td.remove()就會(huì)對(duì)其他列的處理造成影響
$td.hide();
//
最后一行的情況比較特殊一點(diǎn)
//
比如最后2行
td中的內(nèi)容是一樣的,
那么到最后一行就應(yīng)該把此時(shí)的col-td里保存的td設(shè)置rowspan
if
(++index
==
$table.data('trNum'))
$table.data('col-td').attr('rowspan',
$table.data('col-rowspan'));
}
else
{
//
上一行與當(dāng)前行內(nèi)容不同
//
col-rowspan默認(rèn)為1,
如果統(tǒng)計(jì)出的col-rowspan沒(méi)有變化,
不處理
if
($table.data('col-rowspan')
!=
1)
{
$table.data('col-td').attr('rowspan',
$table.data('col-rowspan'));
}
//
保存第一次出現(xiàn)不同內(nèi)容的td,
和其內(nèi)容,
重置col-rowspan
$table.data('col-td',
$td);
$table.data('col-content',
$td.html());
$table.data('col-rowspan',
1);
}
}
});
}
//
同樣是個(gè)private函數(shù)
清理內(nèi)存之用
function
dispose($table)
{
$table.removeData();
}
})(jQuery);
主要的說(shuō)明在注釋里應(yīng)該都有了,
代碼的確比較簡(jiǎn)單,
像有些地方還值得改進(jìn)
?處理的table內(nèi)容是從tbody開(kāi)始查找的,
如果沒(méi)有tbody,
那應(yīng)該給出個(gè)更通用化的方案
?for
(
var
i
=
cols.length
-
1;
cols[i]
!=
undefined;
i--)...如果表格數(shù)據(jù)量大,
處理的列也比較多,
這里不進(jìn)行優(yōu)化會(huì)有造成瀏覽器線程阻塞的風(fēng)險(xiǎn),
可以考慮用setTimeout
?其他什么值得改進(jìn)的,
我想應(yīng)該會(huì)不少的
看上面的代碼，寫法中有個(gè)規(guī)則：必須是相鄰的才可以合并。
所以你提出的按ID合并也必須是ID相同且相鄰。
把
if (that != null $(this).html() == $(that).html()) {
改成
if (that != null $(this).attr('id') == $(that).attr('id')) {
就可以了。
如下所示：
////在table的第二行的位置添加一行：
var tbl_elm = $("#dgList");
$('trtd colspan=\'2\'xxxxxx/td/tr').insertBefore($("TR", tbl_elm).eq(1))
////table中指定行第N列合并單元格(合并后會(huì)多出一列，刪除N+1單元格即可)
var tds = $("#dgList .TableHeader1").find('td');
tds[6].setAttribute("colSpan", "2");
還可以寫成：tds[6].attr("rowSpan", 2);
這種格式$("#dgList").find("tr").eq(0).find("td").eq(7).remove();
////juqery 讀取table第N行第M列
$("#dgList").find("tr").eq(N).find("td").eq(M);
////合并一行中除個(gè)別單元格之外的所有單元格
$("#dgList tr:eq(0) td").each(function () {
if ($(this).text() != '租賃資源' $(this).text() != '用地規(guī)范') {
$(this).attr("rowspan", "2");
}
});
////指定行插入指定行后面
$('trtd租賃資源/tdtd用地規(guī)范/td/tr').insertAfter($("#dgList tr:eq(0)"));
如下所示：
////在table的第二行的位置添加一行：
var
tbl_elm
=
$("#dgList");
$('trtd
colspan=\'2\'xxxxxx/td/tr').insertBefore($("TR",
tbl_elm).eq(1))
////table中指定行第N列合并單元格(合并后會(huì)多出一列，刪除N+1單元格即可)
var
tds
=
$("#dgList
.TableHeader1").find('td');
tds[6].setAttribute("colSpan",
"2");
還可以寫成：tds[6].attr("rowSpan",
2);
這種格式$("#dgList").find("tr").eq(0).find("td").eq(7).remove();
////juqery
讀取table第N行第M列
$("#dgList").find("tr").eq(N).find("td").eq(M);
////合并一行中除個(gè)別單元格之外的所有單元格
$("#dgList
tr:eq(0)
td").each(function
()
{
if
($(this).text()
!=
'租賃資源'
$(this).text()
!=
'用地規(guī)范')
{
$(this).attr("rowspan",
"2");
}
});
////指定行插入指定行后面
$('trtd租賃資源/tdtd用地規(guī)范/td/tr').insertAfter($("#dgList
tr:eq(0)"));
以上這篇jquery
動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
重慶分公司
重慶分公司
