[jQuery]表格合并的问题

最新推荐文章于 2024-11-12 21:33:03 发布

weixin_30389003

最新推荐文章于 2024-11-12 21:33:03 发布

阅读量62

点赞数

文章标签： xhtml c/c++ javascript ViewUI

原文链接：http://www.cnblogs.com/codeio/archive/2011/09/17/2179377.html

版权

知识点

　　刚刚在CSDN上，有朋友问GridView控件对于跨行合并的问题，这可以用控件嵌套来完成，当然，我更喜欢在前台来用JS来控制网页元素的样式，而后台仅仅是根据客户的请求，来返回数据。这里我使用Jquery库，这个就不用过多介绍了，有几个知识点：

　　- 选择器tr:eq(index)，表示选择指定index索引的tr元素，index索引从0开始

　　- tempRow.parent()，表示返回tempRow对象的父节点对象

　　- $("<td/>").prependTo()，表示将一个td元素添加到指定元素的内容头部

实例代码

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" language="javascript" ></script>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#gridview, #gridview td { border:1px #ccc solid; border-collapse:collapse; }
-->
</style>
</head>

<body>
<table id="gridview" width="386" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td width="59" align="center"><strong>课别</strong></td>
    <td width="76" align="center"><strong>班别</strong></td>
    <td width="73" align="center"><strong>班次</strong></td>
    <td width="130" align="center"><strong>出勤时间</strong></td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>一班制</td>
    <td>白班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>一班制</td>
    <td>夜班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>两班制</td>
    <td>白班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>两班制</td>
    <td>白班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>两班制</td>
    <td>夜班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>三班制</td>
    <td>早班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>三班制</td>
    <td>中班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>陈伟勋</td>
    <td>三班制</td>
    <td>晚班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>张文军</td>
    <td>一班制</td>
    <td>白班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>张文军</td>
    <td>两班制</td>
    <td>白班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>张文军</td>
    <td>两班制</td>
    <td>白班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>张文军</td>
    <td>两班制</td>
    <td>夜班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>张文军</td>
    <td>三班制</td>
    <td>夜班</td>
    <td>2011-09-09</td>
  </tr>
  <tr>
    <td>张文军</td>
    <td>三班制</td>
    <td>中班</td>
    <td>2011-09-09</td>
  </tr>
</table>
<script>
	var grid = $("#gridview");
	var rowCount =  grid.find("tr").length - 1;
	var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html();
	var sp = 0;
	for(var i = rowCount; i >=0; i--) {
		var tempRow = grid.find("tr:eq("+i+")");
		if(flagRow == tempRow.find("td:eq(0)").html()) {
			tempRow.find("td:eq(0)").remove();
		}
		else {
			$("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+1)+")"));
			flagRow = tempRow.find("td:eq(0)").html();
			sp = rowCount-i;
			if(i != 0) {
				tempRow.find("td:eq(0)").remove();
			}
		}
	}
</script>

</body>
</html>

注释掉Jquery代码的效果图