简单介绍:html5的data-*能够为标签添加一些自定义的属性和值,并且这种自定义的属性和值可以通过js来获取,十分的便捷

代码:

//html
<tr th:each="plan : ${list}" th:id="${plan.planId}"
th:attr="data-plan-status=${plan.planStatus},data-name=${plan.planName}">
  <td></td>
  <td></td>
</tr> //js代码取值
<script type="text/javascript">
  //获取table选中的tr行的节点 .active 被选中 类似class选择器
  var nodes = $('#table1').DataTable().rows(".active").nodes();
  var statusArray = new Array();
  var nameArray = new Array();
  var idArray = new Array();
  if(CommnUtil.notNull(nodes)){
    for(var i = 0; i<nodes.length; i++ ){
      var planStatus = $(nodes[i]).data('planStatus');
      var planName = $(nodes[i]).data('name');
      var id = $(nodes[i]).attr('id');
      statusArray[i] = planStatus;
      nameArray[i] = planName;
      idArray[i] = id;
    }
  }
  //后边省略
</script>
 

  

说明:data-name取值就是普通的那种取值data('name')   而 data-plan-status取值的话就必须是data('planStatus'),第二个符号“-”后边的首字母会自动转为驼峰(大写),h5的新特性之一。

另外 attr这个玩意儿用来设置或者取得某个属性的值,如果标签中有某个属性,js要获得这个属性的值,直接.attr('属性名'),想为标签设置自定义的属性,直接在标签中attr = "data-xxx"就行

H5新特性之data-*的更多相关文章

  1. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  2. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  3. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  4. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  5. 精进不休 .NET 4.5 (12) - ADO.NET Entity Framework 6.0 新特性, WCF Data Services 5.6 新特性

    [索引页][源码下载] 精进不休 .NET 4.5 (12) - ADO.NET Entity Framework 6.0 新特性, WCF Data Services 5.6 新特性 作者:weba ...

  6. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  7. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  8. H5新特性实现对class的增删改

    直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  10. 使用h5新特性,轻松监听任何App自带返回键

    1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...

随机推荐

  1. PyQt5基础应用一

    一.PyQt5基础   1.1 创建窗口 import sys from PyQt5.QtWidgets import QApplication, QWidget if __name__ == '__ ...

  2. mac用BootCamp装windows装完之后驱动问题

    刚装完会有一个临时盘里面找到BootCamp文件夹然后运行setup.exe,装完即可.

  3. Uint 5.css继承权重,盒模型和border padding

    一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...

  4. 其他综合-使用Xshell远程连接管理Linux实践

    使用Xshell远程连接管理Linux实践 1. Xshell整体优化 1)点击 工具 ,然后选择 选项 2)在 常规 选项中,下面的存放路径根据个人爱好修改(可选默认) 3)在 更新 选项中,将 √ ...

  5. 不同系统下的字长------typedef的意义

    int的字节长度是由CPU和操作系统编译器共同决定的, 一般情况下,主要是由操作系统决定,比如,你在64位AMD的机器上安装的是32位操作系统,那么,int默认是32位的:如果是64位操作系统,64位 ...

  6. Linux saltstack常用模块

    所有模块 salt '172.30.100.126' sys.list_modules #列出当前版本支持的模块 salt '*' sys.doc cp #显示指定模块的文档 archive模块 实现 ...

  7. 【并发编程】【JDK源码】JDK的(J.U.C)java.util.concurrent包结构

    本文从JDK源码包中截取出concurrent包的所有类,对该包整体结构进行一个概述. 在JDK1.5之前,Java中要进行并发编程时,通常需要由程序员独立完成代码实现.当然也有一些开源的框架提供了这 ...

  8. Zabbix通过JMX方式监控java中间件

    Zabbix2.0添加了支持用于监控JMX应用程序的服务进程,称为“Zabbix-Java-gateway”:它是用java写的一个程序. 工作原理: zabbix_server想知道一台主机上的特定 ...

  9. C++(1):error: invalid conversion from ‘void (*)()’ to ‘void (*)(int)

    void signaldemo_test(void) { struct itimerval tv, otv; signal(SIGALRM, sigFunc); //how long to run t ...

  10. SQLALlchemy数据查询小集合

    SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作.将对象转换成SQL,然后使用数据API执行SQL并获取执行结果.在写项目的过 ...