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

使用原生js+jquery 对加载好的表格进行部分列的合并

2016-03-11 12:07 597 查看
在html中的表格加载好以后，对部分具有相同值，需要合并的制定单元格进行合并

jqgrid中

jqGrid.createJqGrid({

…，

…，

loadComplete : function(){

//加载数据完成

combinetable(“gridTable”,2,3,4,8,9,10,11);

},

}）

先来效果图：

点击前：



点击后：



说明：

combineCell(tableId,refIndex)；

combineCell(‘table1’,0,3,4,5)

tableI—–表格Id

0———–参考列index 此时是Id列

3,4,5——-要合并的列的index

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="javascript" src="./JS/jquery-1.11.3.min.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">

/*
tableId--要合并的表格
refIndex--参考数据所在的列index
第三个包括以后的参数直接写在后面

*/
function combineCell(tableId,refIndex){

var agrSize=arguments.length;//得到参数个数
var indexArray=new Array();
for(i=2;i<agrSize;i++){
indexArray.push(arguments[i]);
}

var trArray=new Array();
$("#"+tableId+" tr").each(function(){
var trObj=this;
var text=trObj.childNodes[refIndex].innerHTML;

if(trArray.length>0){
var flag=-1
for(i=0;i<trArray.length;i++){
if(trArray[i][0].childNodes[refIndex].innerHTML==text){
flag=i;
}
}
if(flag!=-1){
trArray[flag].push(trObj);
}else{
trArray.push(new Array(trObj));
}
}else{
trArray.push(new Array(trObj));
}
})
$("#"+tableId).empty();
for(j=0;j<trArray.length;j++){
var t=trArray[j];//得到行对象(可能有多个行)
if(t.length==1){
$("#"+tableId).append($(t))
}else{

for(k=0;k< t.length;k++){
if(k==0){
for(l=0;l<indexArray.length;l++){
$(t[k].childNodes[indexArray[l]]).attr("rowspan",t.length)
}

}
else{
for(l=0;l<indexArray.length;l++){
$(t[k].childNodes[indexArray[l]]).hide();
}

}
}
$("#"+tableId).append($(t))
}}
}

</script>
</head>
<body>
<table id="table1" border="1" style="border-collapse: collapse; border: 1px solid #cbcbcb;
text-align: center;">
<tr id="5"><th style="text-align:left;display:none;">id</th><th>name</th><th>age</th><th>height</th><th>weight</th><th>sex</th></tr>
<tr id="3"><td style="text-align:left;display:none;">2</td><td>02</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
<tr id="6"><td style="text-align:left;display:none;">1</td><td>11</td><td>11</td><td>22</td><td>33</td><td>44</td></tr>
<tr id="4"><td style="text-align:left;display:none;">2</td><td>02</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
</table>
<button onclick="combineCell('table1',0,3,4,5)">点击我</button>
</body>
</html>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html jquery javascript 合并 jQgrid
相关文章推荐
新的分享
章节导航