Jquery 表格合并的问题分享
2011-09-17 00:00
330 查看
这里我使用Jquery库,这个就不用过多介绍了,有几个知识点:
- 选择器tr:eq(index),表示选择指定index索引的tr元素,index索引从0开始
- tempRow.parent(),表示返回tempRow对象的父节点对象
- $("<td/>").prependTo(),表示将一个td元素添加到指定元素的内容头部
实例代码
index.html
注释掉Jquery代码的效果图
运行Jquery代码的效果图
小结
代码写得很粗糙,只是简单做个笔记,最近在忙着整理编写一些Jquery插件和discuz插件,Python和PyQt的相关文章都未来得及整理发布,唉,时间不够用啊,只能慢慢来了。Jquery是相当不错的说,内置Sizzle选择器后,那速度更是飞一般,貌似现在到1.6版本了,希望越做越好吧!
- 选择器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代码的效果图
运行Jquery代码的效果图
小结
代码写得很粗糙,只是简单做个笔记,最近在忙着整理编写一些Jquery插件和discuz插件,Python和PyQt的相关文章都未来得及整理发布,唉,时间不够用啊,只能慢慢来了。Jquery是相当不错的说,内置Sizzle选择器后,那速度更是飞一般,貌似现在到1.6版本了,希望越做越好吧!
相关文章推荐
- Jquery 表格合并的问题分享
- [jQuery]表格合并的问题
- 基于jQuery的合并表格中相同文本的相邻单元格的代码
- 小女子需要各位博友帮忙—— 一个关于JS 动态表格合并拆分问题
- html中表格table的行列合并问题解决
- 使用jQuery实现页面表格中相同内容的行或列合并
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题
- jquery合并表格中相同文本的相邻单元格
- table表格合并列的问题,在IE中能够正常显示,但是在火狐中,好像colspan没有起作用一样,解决办法!!!!
- 用jQuery合并表格中相同文本的相邻单元格
- 分享一个基于jQuery的锁定表格行列的js脚本。
- 分享一个基于jQuery的锁定表格行列的js脚本
- web前端基础:用jQuery制作双色表格代码分享
- jquery合并表格中相同文本的相邻单元格
- jquery合并表格中相同文本的相邻单元格
- jquery合并单元格(表格相邻列内容相同合并)
- Jquery 合并表格单元内容相同的单元
- 新学的插件jquery.tablesorter很好用,说说遇到的表格动态添加的数据不能排序的问题
- jquery中关于表格行的增删问题
- 用jQuery合并表格中相同文本的相邻单元格