Javascript 如何使用jquery扩展表行？_Javascript_Php_Html_Jquery

Javascript 如何使用jquery扩展表行？

javascript php html jquery

Javascript 如何使用jquery扩展表行？,javascript,php,html,jquery,Javascript,Php,Html,Jquery,目前，我有一个表格，如图所示，带有隐藏的偶数行。我要寻找的是，所有的行都被隐藏，月份的名称也会出现在该图像的示例中，它只需在11月份出现，并且在显示时会显示该月份的信息。我正在使用jquery中的jexpand插件我留下了代码，这样你就可以看到我现在是如何拥有它的。有什么想法吗剧本 $（文档）.ready（函数（）{ $（“#报告tr:odd”）.addClass（“odd”）； $（“#报告tr:not（.odd）”）.hide（）； $（“#报告tr:第一个孩子”）.show（）； $

目前，我有一个表格，如图所示，带有隐藏的偶数行。我要寻找的是，所有的行都被隐藏，月份的名称也会出现

在该图像的示例中，它只需在11月份出现，并且在显示时会显示该月份的信息。我正在使用jquery中的jexpand插件

我留下了代码，这样你就可以看到我现在是如何拥有它的。有什么想法吗

剧本

$（文档）.ready（函数（）{
$（“#报告tr:odd”）.addClass（“odd”）；
$（“#报告tr:not（.odd）”）.hide（）；
$（“#报告tr:第一个孩子”）.show（）；
$（“#report tr.odd”）。单击（函数（）{
$（this.next（“tr”）.toggle（）；
$（this.find（“.arrow”）.toggleClass（“向上”）；
});
});

CSS

body{font-family:Arial，Helvetica，Sans-Serif；字体大小：0.8em；}
#报告{边界折叠：折叠；}
#报告h4{边距：0px；填充：0px；}
#报表img{float:right；}
#报告ul{margin:10px 0 10px 40px；padding:0px；}
#报告{background:#7CB8E2 url（../img/header_bkg.png）repeat-x向左中滚动；颜色：#fff；填充：7px 15px；文本对齐：居中；}
#报告td{background:#C7DDEE none repeat-x向左中滚动；颜色：#000；填充：7px 15px；}
#report tr.odd td{background:#fff url（../img/row_bkg.png）repeat-x向左中心滚动；光标：pointer；}
#report div.arrow{背景：透明url（../img/arrows.png）无重复滚动0px-16px；宽度：16px；高度：16px；显示：block；}
#报表分区up{背景位置：0px 0px；}

HTML


日期
电话
销售额

由于您的日期显示在

dd-mm-yyyy

中，所以获取月份的简单方法是使用

split

方法，然后一旦获得月份，我们需要循环通过

trs

隐藏除第一个月之外的所有月份，并向其添加

odd

类

然后，单击

tr

只需从

td

中获取月份，然后循环通过具有相同月份的trs，向该td添加

up

类，并显示相同的tr

演示代码：

//单击tr时
$（文档）。在（“单击”，“报告tr.odd”，函数（）上）{
//月薪
var mnth=$（this.find（“td:eq（0）”）.text（）.trim（）.split（“-”[1]
//循环完成tr以查找当月tr
$（“tbody>tr”）.not（this）.each（function（）{
var mnth_other=$（this）.find（“td:eq（0）”）.text（）.trim（）.split（“-”[1]
如果（mnth==mnth_其他）{
$（this.toggle（）；
$（this.find（“.arrow”）.toggleClass（“向上”）；
}
});
});
var日期和电流；
//循环通过tr
$（“tbody>tr”）。每个（函数（）{
//月薪
var dates=$（this.find（“td:eq（0）”）.text（）.trim（）.split（“-”[1]；
//检查是否不相等
如果（当前日期！=日期）{
$（此）.addClass（“奇数”）；
$（this.find（“.arrow”）.addClass（“down”）；
日期=当前日期；
}否则{
//隐藏其他tr
$（this.hide（））
}
})

.up{
变换：旋转（-135度）；
-webkit变换：旋转（-135度）；
}
.下来{
变换：旋转（45度）；
-webkit变换：旋转（45度）；
}
.阿罗{
边框：纯黑；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
}


日期
电话
销售额
27-11-2020
22
1.
27-11-2020
22
1.
21-11-2020
22
12
20-12-2020
222
21
27-12-2020
22
1.
27-12-2020
22
1.