您的位置：首页 > Web前端 > JQuery

JQuery合并某列（行）单元格（绿色环保低碳全自动）---免费试用.你！！！还等什么？

2011-10-28 15:07 363 查看

做项目的时候遇到的问题.搜索了好久.多数都描述的不具体.应用起来比较费劲.个人略微整理了一下.希望对大家有帮助.

下面是示例

注意导入js文件

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>合并单元格(列)</title>
<style type="text/css">
td{
font-size: 12px;
background-color: #D4D4D4;
border: 1px solid #9AC0CD;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
_w_table_lefttitle_rowspan("#rspan",0,0);
})
</script>
<script language="javascript">
function _w_table_lefttitle_rowspan(_w_table_id, _w_table_mincolnum,
_w_table_maxcolnum) {
if (_w_table_mincolnum == void 0) {
_w_table_mincolnum = 1;
}
if (_w_table_maxcolnum == void 0) {
_w_table_maxcolnum = _w_table_mincolnum;
}
if (_w_table_mincolnum > _w_table_maxcolnum) {
return "";
} else {
var _w_table_splitrow = new Array();
_w_table_onerowspan(1); // 只合并第一列
/*
* for(iLoop=1;iLoop<=2;iLoop++){//合并前两列 _w_table_onerowspan(iLoop); }
*/
}

function _w_table_onerowspan(_w_table_colnum) {
_w_table_firstrow = 0;
_w_table_SpanNum = 0;
_w_table_splitNum = 0;
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum
+ ")");
_w_table_curcol_rownum = _w_table_Obj.length - 1;
if (_w_table_splitrow.length == 0) {
_w_table_splitrow[0] = _w_table_curcol_rownum;
}
_w_table_lastrow = _w_table_splitrow[0];
var _w_table_firsttd;
var _w_table_currenttd;
var _w_table_curcol_splitrow = new Array();
_w_table_Obj.each( function(i) {
if (i == _w_table_firstrow) {
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
} else {
_w_table_currenttd = $(this);
if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
_w_table_SpanNum++;
_w_table_currenttd.hide(); // remove();
_w_table_firsttd.attr("rowSpan", _w_table_SpanNum);
} else {
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
setTableRow(i - 1);
}
if (i == _w_table_lastrow) {
setTableRow(i);
}
}

function setTableRow(_splitrownum) {
if (_w_table_lastrow <= _splitrownum
&& _w_table_splitNum++ < _w_table_splitrow.length) {
_w_table_lastrow = _w_table_splitrow[_w_table_splitNum];
}
_w_table_curcol_splitrow[_w_table_curcol_splitrow.length] = _splitrownum;
if (i < _w_table_curcol_rownum) {
_w_table_firstrow = _splitrownum + 1;
}
}
})	;
_w_table_splitrow = _w_table_curcol_splitrow;
}
}
</script>
</head>

<body>
<table width="500" height="350" border="0" cellpadding="0"
cellspacing="0" id="rspan">
<tr>
<td><div align="center">A</div></td>
<td><div align="center">Q</div></td>
<td><div align="center">J</div></td>
<td><div align="center">T</div></td>
<td><div align="center">P</div></td>
<td><div align="center">Z</div></td>
<td><div align="center">F</div></td>
</tr>
<tr>
<td><div align="center">A</div></td>
<td><div align="center">W</div></td>
<td><div align="center">J</div></td>
<td><div align="center">Y</div></td>
<td><div align="center">O</div></td>
<td><div align="center">X</div></td>
<td><div align="center">G</div></td>
</tr>
<tr>
<td><div align="center">B</div></td>
<td><div align="center">W</div></td>
<td><div align="center">J</div></td>
<td><div align="center">Y</div></td>
<td><div align="center">P</div></td>
<td><div align="center">Z</div></td>
<td><div align="center">H</div></td>
</tr>
<tr>
<td><div align="center">C</div></td>
<td><div align="center">W</div></td>
<td><div align="center">K</div></td>
<td><div align="center">T</div></td>
<td><div align="center">I</div></td>
<td><div align="center">Z</div></td>
<td><div align="center">H</div></td>
</tr>
<tr>
<td><div align="center">C</div></td>
<td><div align="center">E</div></td>
<td><div align="center">L</div></td>
<td><div align="center">T</div></td>
<td><div align="center">I</div></td>
<td><div align="center">X</div></td>
<td><div align="center">G</div></td>
</tr>
<tr>
<td><div align="center">C</div></td>
<td><div align="center">E</div></td>
<td><div align="center">J</div></td>
<td><div align="center">U</div></td>
<td><div align="center">I</div></td>
<td><div align="center">C</div></td>
<td><div align="center">F</div></td>
</tr>
<tr>
<td><div align="center">D</div></td>
<td><div align="center">Q</div></td>
<td><div align="center">L</div></td>
<td><div align="center">U</div></td>
<td><div align="center">P</div></td>
<td><div align="center">C</div></td>
<td><div align="center">G</div></td>
</tr>
<tr>
<td><div align="center">E</div></td>
<td><div align="center">E</div></td>
<td><div align="center">L</div></td>
<td><div align="center">U</div></td>
<td><div align="center">O</div></td>
<td><div align="center">X</div></td>
<td><div align="center">G</div></td>
</tr>
<tr>
<td><div align="center">E</div></td>
<td><div align="center">W</div></td>
<td><div align="center">K</div></td>
<td><div align="center">Y</div></td>
<td><div align="center">O</div></td>
<td><div align="center">C</div></td>
<td><div align="center">H</div></td>
</tr>
<tr>
<td><div align="center">E</div></td>
<td><div align="center">W</div></td>
<td><div align="center">K</div></td>
<td><div align="center">T</div></td>
<td><div align="center">P</div></td>
<td><div align="center">X</div></td>
<td><div align="center">F</div></td>
</tr>
</table>
</body>
</html>

合并前

合并后

哦了大家试试吧

免费试用！你！！！还等什么？

我用着反正没问题如果想合并行那就自己修改吧如果大家使用发现有问题记得留言哦

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery table function border xhtml html

相关文章推荐

新的分享

章节导航