jQuery實(shí)現(xiàn)HTML表格單元格的合并功能
更新時(shí)間：2016年04月06日 09:18:25 作者：向往
這篇文章主要介紹了jQuery實(shí)現(xiàn)HTML表格單元格的合并功能,可合并指定行與指定列上的單元格,涉及jQuery針對(duì)表格元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)HTML表格單元格合并的方法。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
合并前：
合并后：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* desc : 合并指定表格（表格id為table_id）指定列（列數(shù)為table_colnum）的相同文本的相鄰單元格
* @table_id 表格id : 為需要進(jìn)行合并單元格的表格的id。如在HTMl中指定表格 id="data" ，此參數(shù)應(yīng)為 #data
* @table_colnum : 為需要合并單元格的所在列.參考jQuery中nth-child的參數(shù).若為數(shù)字，從最左邊第一列為1開始算起;"even" 表示偶數(shù)列;"odd" 表示奇數(shù)列; "3n+1" 表示的列數(shù)為1、4、7、......
* @table_minrow ? : 可選的,表示要合并列的行數(shù)最小的列,省略表示從第0行開始 (閉區(qū)間)
* @table_maxrow ? : 可選的,表示要合并列的行數(shù)最大的列,省略表示最大行列數(shù)為表格最后一行 (開區(qū)間)
*/
function table_rowspan(table_id, table_colnum) {
if (table_colnum == "even") {
table_colnum = "2n";
}
else if (table_colnum == "odd") {
table_colnum = "2n+1";
}
else {
table_colnum = "" + table_colnum;
}
var cols = [];
var all_row_num = $(table_id + " tr td:nth-child(1)").length;
var all_col_num = $(table_id + " tr:nth-child(1)").children().length;
if (table_colnum.indexOf("n") == -1) {
cols[0] = table_colnum;
}
else {
var n = 0;
var a = table_colnum.substring(0, table_colnum.indexOf("n"));
var b = table_colnum.substring(table_colnum.indexOf("n") + 1);
//alert("a="+a+"b="+(b==true));
a = a ? parseInt(a) : 1;
b = b ? parseInt(b) : 0;
//alert(b);
while (a * n + b <= all_col_num) {
cols[n] = a * n + b;
n++;
}
}
var table_minrow = arguments[2] ? arguments[2] : 0;
var table_maxrow = arguments[3] ? arguments[3] : all_row_num + 1;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
for (var j = 0; j < cols.length; j++) {
$(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow, table_maxrow).each(function (i) {
var table_col_obj = $(this);
if (table_col_obj.html() != " ") {
if (i == 0) {
table_firsttd = $(this);
table_SpanNum = 1;
}
else {
table_currenttd = $(this);
if (table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr("rowSpan", table_SpanNum);
} else {
table_firsttd = $(this);
table_SpanNum = 1;
}
}
}
});
}
}
/**
* desc : 合并指定表格（表格id為table_id）指定行（行數(shù)為table_rownum）的相同文本的相鄰單元格
* @table_id 表格id : 為需要進(jìn)行合并單元格的表格的id。如在HTMl中指定表格 id="data" ，此參數(shù)應(yīng)為 #data
* @table_rownum : 為需要合并單元格的所在行.參考jQuery中nth-child的參數(shù).若為數(shù)字，從最左邊第一列為1開始算起;"even" 表示偶數(shù)行;"odd" 表示奇數(shù)行; "3n+1" 表示的行數(shù)為1、4、7、......
* @table_mincolnum ? : 可選的,表示要合并行中的最小列,省略表示從第0列開始(閉區(qū)間)
* @table_maxcolnum ? : 可選的,表示要合并行中的最大列,省略表示表格的最大列數(shù)(開區(qū)間)
*/
function table_colspan(table_id, table_rownum) {
//if(table_maxcolnum == void 0){table_maxcolnum=0;}
var table_mincolnum = arguments[2] ? arguments[2] : 0;
var table_maxcolnum;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
$(table_id + " tr:nth-child(" + table_rownum + ")").each(function (i) {
table_row_obj = $(this).children();
table_maxcolnum = arguments[3] ? arguments[3] : table_row_obj.length;
table_row_obj.slice(table_mincolnum, table_maxcolnum).each(function (i) {
if (i == 0) {
table_firsttd = $(this);
table_SpanNum = 1;
} else if ((table_maxcolnum > 0) && (i > table_maxcolnum)) {
return "";
} else {
table_currenttd = $(this);
if (table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
if (table_currenttd.is(":visible")) {
table_firsttd.width(parseInt(table_firsttd.width()) + parseInt(table_currenttd.width()));
}
table_currenttd.hide(); //remove();
table_firsttd.attr("colSpan", table_SpanNum);
} else {
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
});
}
</script>
</head>
<body>
<table width="400" border="1" id="table1">
<tr>
<td align="center">
a
</td>
<td>
for
</td>
<td>
for
</td>
<td>
100
</td>
<td>
200
</td>
<td>
200
</td>
</tr>
<tr>
<td>
a
</td>
<td>
for
</td>
<td>
for
</td>
<td>
150
</td>
<td>
230
</td>
<td>
200
</td>
</tr>
<tr>
<td>
dd
</td>
<td>
if
</td>
<td>
for
</td>
<td>
100
</td>
<td>
200
</td>
<td>
200
</td>
</tr>
<tr>
<td>
aa
</td>
<td>
if
</td>
<td>
for
</td>
<td>
300
</td>
<td>
240
</td>
<td>
200
</td>
</tr>
<tr>
<td>
e
</td>
<td>
if
</td>
<td>
for
</td>
<td>
320
</td>
<td>
230
</td>
<td>
200
</td>
</tr>
</table>
<input type="button" value="合并表格2" onClick="table_colspan('#table1',1)">
<input type="button" value="合并表格1" onClick="table_rowspan('#table1',1)">
</body>
</html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
- 基于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的合并表格中相同文本的相鄰單元格的代碼
- 使用jQuery 操作table 完成單元格合并的實(shí)例
- jquery 合并內(nèi)容相同的單元格(示例代碼)
- jquery合并表格中相同文本的相鄰單元格
- jQuery實(shí)現(xiàn)合并表格單元格中相同行操作示例
相關(guān)文章
jQuery實(shí)現(xiàn)簡(jiǎn)單三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單三級(jí)聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
jquery下jstree簡(jiǎn)單應(yīng)用 - v1.0
jquery下jstree簡(jiǎn)單應(yīng)用，學(xué)習(xí)jstree的朋友可以參考下。2011-04-04
擴(kuò)展easyui.datagrid，添加數(shù)據(jù)loading遮罩效果代碼
easyui可以說(shuō)是輕量級(jí)的前端UI框架，更新到1.2.1支持更多的事件，方法和屬性2010-11-11
13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦
這篇文章主要介紹了13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件，非常炫酷實(shí)用，有需要的小伙伴參考下2014-12-12
jquery 中ajax執(zhí)行的優(yōu)先級(jí)
本文給大家講述的是個(gè)人再做用戶注冊(cè)的時(shí)候遇到的ajax執(zhí)行優(yōu)先級(jí)的問(wèn)題，以及在網(wǎng)友們的幫助下，解決此問(wèn)題的全過(guò)程，這里記錄下來(lái)，分享給大家。2015-06-06
原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效
本文主要分享了原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效的實(shí)例代碼?？芍苯訌?fù)制保存HTML運(yùn)行查看效果。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
cnblogs中在閃存中屏蔽某人的實(shí)現(xiàn)代碼
cnblogs園子還沒(méi)提供這項(xiàng)功能，我們又確實(shí)有這個(gè)需求，只好自己寫一個(gè),需要的朋友可以參考下。2010-11-11
jQuery彈出窗口簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery彈出窗口的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了15個(gè)常用的jquery代碼片段，對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊彈出漸變層的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊彈出漸變層的方法,jQuery是當(dāng)下最具人氣的JavaScript庫(kù),需要的朋友可以參考下2015-07-07