jquery 动态合并表格

//这段jquery代码是在网上找到的,自己的改动比较小,但是,经过改动之后,符合了自己的需求,记下,以备后用
<script type="text/javascript">
//根据第一列的某几行相同,合并对应行的某列
jQuery.fn.rowspan = function(colIdx) {
    return this.each(function() {
        var that;
        $('tr', this).each(function(row) {
            $('td:eq(' + colIdx + ')', this).filter(':visible').each(function(col) {
		//重点在这句话,根据name的不同来合并if (that != null && $(this).attr('name') == $(that).attr('name')) {
		//如果需要根据本列相同来合并需要改成if (that != null && $(this).html() == $(that).html()) {
                if (that != null && $(this).attr('name') == $(that).attr('name')) {
                    rowspan = $(that).attr("rowSpan");
                    if (rowspan == undefined) {
                        $(that).attr("rowSpan", 1);
                        rowspan = $(that).attr("rowSpan");
                    }
                    rowspan = Number(rowspan) + 1;
                    $(that).attr("rowSpan", rowspan);
                    $(this).hide();
                } else {
                    that = this;
                }
            });
        });
    });
}


$(document).ready(function(){ 
  uniteTable(tb1,8);
});

///   
//  功能:合并表格   
//  参数:tb--需要合并的表格ID   
//  参数:colLength--需要对前几列进行合并,比如,   
//  想合并前两列,后面的数据列忽略合并,colLength应为2   
//  缺省表示对全部列合并 
//兼容IE FF
///   
function   uniteTable(tb,colLength){
//   检查表格是否规整   
if   (!checkTable(tb))   return;
	    $("#tb1").rowspan(0);//合并第一列
	    $("#tb1").rowspan(3);//合并第二列
	    $("#tb1").rowspan(5);//合并第四列
}    
/   
//  功能:检查表格是否规整   
//  参数:tb--需要检查的表格ID   
/   
function   checkTable(tb){   
if   (tb.rows.length==1)   return   false; 
if   (tb.rows[0].cells.length==0)   return   false; 
for   (var   i=0;i<tb.rows.length;i++){   
if   (tb.rows[0].cells.length   !=   tb.rows[i].cells.length)   return   false;   
}   
return   true;   
}
</script>
<table class="table" style="width:100%;" layoutH="155" id="tb1">
			<thead>
				<tr>
					<th width="15%" align="center" >企业名称</th>
					<th width="15%" align="center" >监控点名称</th>
						<th width="10%" align="center">
							COD总量(kg)
						</th>
						<th width="10%" align="center">
							企业COD总量(kg)
						</th>
						<th width="10%" align="center">
							氨氮总量(kg)
						</th>
						<th width="10%" align="center">
							企业氨氮总量(kg)
						</th>
					<th width="10%" align="center">
						流量(m3/h)
					</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="resultList" items="${page.result }">
					<tr>
						<td width="15%" align="left" name="${resultList.ENTERPRISE_NAME}">${resultList.ENTERPRISE_NAME}</td>
						<td width="15%" align="left" >${resultList.MON_NAME}</td>
						<td align="center" >${resultList.COD_PFL}</td>
						<td align="center"  name="${resultList.ENTERPRISE_NAME}">${resultList.ENT_COD_PFL}</td>
						<td align="center" >${resultList.NHN_COU}</td>
						<td align="center"  name="${resultList.ENTERPRISE_NAME}">${resultList.ENT_NHN_COU}</td>
						<td width="10%">${resultList.BGLL == null ? 0 : resultList.BGLL}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果你想要实现 html 表格动态合并,可以考虑使用 JavaScript 或 jQuery 实现。以下是一个简单的示例: HTML 代码: ```html <table id="myTable"> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> </tr> <tr> <td rowspan="3">张三</td> <td>语文</td> <td>90</td> </tr> <tr> <td>数学</td> <td>85</td> </tr> <tr> <td>英语</td> <td>92</td> </tr> <tr> <td>李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>王五</td> <td>语文</td> <td>92</td> </tr> </table> ``` JavaScript 代码: ```javascript $(document).ready(function() { // 获取表格中的单元格 var cells = document.getElementsByTagName('td'); // 遍历单元格,查找需要合并的单元格 for (var i = 0; i < cells.length; i++) { var rowspan = cells[i].getAttribute('rowspan'); if (rowspan) { rowspan = parseInt(rowspan); var nextRow = cells[i].parentNode.nextSibling; while (nextRow && nextRow.nodeType != 1) { nextRow = nextRow.nextSibling; } if (nextRow) { var cellToExtend = nextRow.getElementsByTagName('td')[i]; cellToExtend.setAttribute('rowspan', rowspan - 1); } } } }); ``` 这段代码使用了 jQuery 库来方便地获取表格中的单元格,然后遍历单元格,查找需要合并的单元格并进行合并。具体来说,对于每个具有 `rowspan` 属性的单元格,它会获取该属性的值并将其转换为整数,然后查找下一行相同列数的单元格,并将其 `rowspan` 属性的值减 1。这样就实现了动态合并表格的效果。 ### 回答2: 在HTML中,可以通过使用rowspan和colspan属性来实现表格动态合并。 rowspan属性用于合并行,它指定了一个单元格跨越的行数。例如,如果我们想要将一个单元格合并到它下面的两行中,可以在这个单元格中添加rowspan="2"属性。 colspan属性用于合并列,它指定了一个单元格跨越的列数。例如,如果我们想要将一个单元格合并到它右边的三列中,可以在这个单元格中添加colspan="3"属性。 下面是一个示例,演示如何使用rowspan和colspan属性来合并表格中的单元格。 ``` <table> <tr> <td rowspan="2">合并行</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td colspan="2">合并列</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </table> ``` 在上面的示例中,第一个单元格跨越了两行,并且第三个单元格跨越了两列。 通过这种方式,我们可以根据需要动态合并表格中的单元格,使表格更加清晰和紧凑。 ### 回答3: 在HTML中,可以使用colspan和rowspan属性来实现表格动态合并。 colspan属性用于将一个单元格水平合并多个单元格。例如,如果我们想要将第一行的两个单元格合并成一个,可以将第一个单元格的colspan属性设置为2。 rowspan属性用于将一个单元格垂直合并多个单元格。例如,如果我们想要将第一列的两个单元格合并成一个,可以将第一个单元格的rowspan属性设置为2。 下面是一个示例代码: ```html <table> <tr> <th colspan="2">表头</th> <th>表头</th> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td rowspan="2">单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> </tr> </table> ``` 在这个例子中,第一行的第一个单元格使用了colspan="2"属性,合并了两个单元格;第一列的第一个单元格使用了rowspan="2"属性,合并了两个单元格。 使用这样的属性组合,我们可以实现不同方式的动态表格合并,使表格更加灵活多样。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值