Jquery 表格合并的问题分享_Javascript教程-查字典教程网
Jquery 表格合并的问题分享
Jquery 表格合并的问题分享
发布时间:2016-12-30 来源:查字典编辑
摘要:这里我使用Jquery库,这个就不用过多介绍了,有几个知识点:-选择器tr:eq(index),表示选择指定index索引的tr元素,ind...

这里我使用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">

<>

</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代码的效果图

运行Jquery代码的效果图

小结

代码写得很粗糙,只是简单做个笔记,最近在忙着整理编写一些Jquery插件和discuz插件,Python和PyQt的相关文章都未来得及整理发布,唉,时间不够用啊,只能慢慢来了。Jquery是相当不错的说,内置Sizzle选择器后,那速度更是飞一般,貌似现在到1.6版本了,希望越做越好吧!

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类