Maison > interface Web > js tutoriel > Jquery 表格合并的问题分享_jquery

Jquery 表格合并的问题分享_jquery

WBOY
Libérer: 2016-05-16 18:02:11
original
1024 Les gens l'ont consulté

这里我使用Jquery库,这个就不用过多介绍了,有几个知识点:
  - 选择器tr:eq(index),表示选择指定index索引的tr元素,index索引从0开始
  - tempRow.parent(),表示返回tempRow对象的父节点对象
  - $("

").prependTo(),表示将一个td元素添加到指定元素的内容头部
实例代码
index.html
复制代码 代码如下:



































































































课别 班别 班次 出勤时间
陈伟勋 一班制 白班 2011-09-09
陈伟勋 一班制 夜班 2011-09-09
陈伟勋 两班制 白班 2011-09-09
陈伟勋 两班制 白班 2011-09-09
陈伟勋 两班制 夜班 2011-09-09
陈伟勋 三班制 早班 2011-09-09
陈伟勋 三班制 中班 2011-09-09
陈伟勋 三班制 晚班 2011-09-09
张文军 一班制 白班 2011-09-09
张文军 两班制 白班 2011-09-09
张文军 两班制 白班 2011-09-09
张文军 两班制 夜班 2011-09-09
张文军 三班制 夜班 2011-09-09
张文军 三班制 中班 2011-09-09

<script> <BR>var grid = $("#gridview"); <BR>var rowCount = grid.find("tr").length - 1; <BR>var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html(); <BR>var sp = 0; <BR>for(var i = rowCount; i >=0; i--) { <BR>var tempRow = grid.find("tr:eq("+i+")"); <BR>if(flagRow == tempRow.find("td:eq(0)").html()) { <BR>tempRow.find("td:eq(0)").remove(); <BR>} <BR>else { <BR>$("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+1)+")")); <BR>flagRow = tempRow.find("td:eq(0)").html(); <BR>sp = rowCount-i; <BR>if(i != 0) { <BR>tempRow.find("td:eq(0)").remove(); <BR>} <BR>} <BR>} <BR></script>



注释掉Jquery代码的效果图

运行Jquery代码的效果图


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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal