Jquery 表格合并的问题分享

这里我使用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学习笔记 delete运算符

一、语法 delete后面的表达式必须给出一个属性的引用，比如 var o = {a:1}; delete o.a; //此处o.a是对象o的属性a的引用只有在with语句里才能使用单独的属性名复制代码代码如下: with(o){ delete a; } 二、del>>>详细阅读

本文标题：Jquery 表格合并的问题分享

地址：http://www.17bianji.com/kaifa2/JS/24167.html

1/2 1