帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery高亮显示表格每行或每列中的最大/最小值插件(tableMinMax)

帝国模板之家 2020-11-12 网页特效 评论

tableMinMax是一款用于处理表数据的jQuery插件,它使用自定义CSS样式自动突出显示每行或每列中的最大值和最小值。查看大量大型HTML表格数据时,可以快速的帮助你找到最大值和最小值。

使用方法:

1.下载并加载tableMinMax.js在jQuery库之后。

<script src="jquery.slim.min.js"></script>
<script src="tableMinMax.js"></script>

2.在html页面中添加插件代码

<table id="example">
  ...
</table>
tableMinMax({
  "table": "#example"
});

3.确定要在哪些单元格和/或列中突出显示最大/最小值。默认值:“全部”。 Default: 'all'.

tableMinMax({
  "table": "#example",
  "search": {
    "mode": "row", // or 'col', 'all'
    "nr": [1] // row / col number
  },
});

4.自定义CSS样式应用于最大/最小值。

tableMinMax({
  "table": "#example",
  "css": {
    "min": 'min',
    "max": 'max'
  },
  colorize: 'span' // apply CSS class(es) to 'span' or 'cell' (default)
});
.min {
  background-color: #DF0101;
  color: white;
}

.max {
  background-color: #01DFA4;
  color: black;
}

5.确定是否改变最小/最大类。默认值:false。

tableMinMax({
  "table": "#example",
  "css": {
    "min": 'min',
    "max": 'max'
  },
  invert: true
});

6.可以通过HTML传递如下data选项属性:

<table id="example"
       data-search-mode="col"
       data-css-min="min"
       data-css-max="max">
       ...
</table>

7.此外,该插件还可以使用color2k库 .

<script src="https://cdn.jsdelivr.net/npm/color2k@latest/index.min.js"></script>

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

只要可以深入到所处的环境,相信美好一定会从那里产生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言