search

Home  >  Article  >  Web Front-end  >  jQuery implements the merge function of HTML table cells_jquery

jQuery implements the merge function of HTML table cells_jquery

WBOY
WBOYOriginal
2016-05-16 15:06:261394browse

The example in this article describes how jQuery implements HTML table cell merging. Share it with everyone for your reference, the details are as follows:

The screenshot of the running effect is as follows:

Before merge:

After merge:

The specific code is as follows: 

<!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）指定列（列数为table_colnum）的相同文本的相邻单元格 
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data 
* @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、...... 
* @table_minrow &#63; : 可选的,表示要合并列的行数最小的列,省略表示从第0行开始 (闭区间) 
* @table_maxrow &#63; : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间) 
*/
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 &#63; parseInt(a) : 1;
b = b &#63; parseInt(b) : 0;
//alert(b);
while (a * n + b <= all_col_num) {
cols[n] = a * n + b;
n++;
}
}
var table_minrow = arguments[2] &#63; arguments[2] : 0;
var table_maxrow = arguments[3] &#63; 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）指定行（行数为table_rownum）的相同文本的相邻单元格 
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data 
* @table_rownum : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数行;"odd" 表示奇数行; "3n+1" 表示的行数为1、4、7、...... 
* @table_mincolnum &#63; : 可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间)
* @table_maxcolnum &#63; : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间) 
*/
function table_colspan(table_id, table_rownum) {
//if(table_maxcolnum == void 0){table_maxcolnum=0;}
var table_mincolnum = arguments[2] &#63; 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] &#63; 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>

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery table (table) operation skills summary", "jQuery drag effects and skills summary ", "jQuery extension skills summary", "jQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selection Summary of tool usage" and "JQuery common plug-ins and usage summary"

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript interaction based on HTML template and JSON data (mobile terminal)_javascript skillsNext article：JavaScript interaction based on HTML template and JSON data (mobile terminal)_javascript skills

Related articles

See more