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

代码:

  1. //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>
  2.  
  3. //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>
  1.  

  

说明: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. Flask 快速使用 进阶—— (2)

    案例:可配置发送信息的系统 假如我们有这样的一个系统,可以发送短息,邮件和微信,后期可能还会增加一些平台,怎么才可以做到快速切换的去使用某种功能呢,在这里我会通过在配置文件中简单的配置就可以实现 在项 ...

  2. spring和mybatis的整合配置

    参考自: http://www.cnblogs.com/wangmingshun/p/5674633.html 链接中的文章里一共有三种整合方式,太多了怕记混了. 我这里只保留第二种. spring中 ...

  3. Luogu5289 十二省联考2019皮配(动态规划)

    将选择导师看成先选阵营再选派系,这样有显然的O(nm2)暴力,即按城市排序后,设f[i][j][k]为前i个学校中第一个阵营有j人第一个派系有k人的方案数,暴力背包. 对于k=0,可以发现选阵营和选派 ...

  4. HTML div 盒子 添加/删除——浮层

    1.clear语法:clear : none | left|right| both 2.clear参数值说明:none : 允许两边都可以有浮动对象both : 不允许有浮动对象left : 不允许左 ...

  5. AtCoder Grand Contest 012

    AtCoder Grand Contest 012 A - AtCoder Group Contest 翻译 有\(3n\)个人,每一个人有一个强大值(看我的假翻译),每三个人可以分成一组,一组的强大 ...

  6. [原文 + 补充] 当你在浏览器中输入Google.com并且按下回车之后发生了什么?

    原文:https://github.com/alex/what-happens-when/blob/master/README.rst 一个版本的翻译: https://github.com/skyl ...

  7. Spring中的AOP 专题

    Caused by: java.lang.IllegalArgumentException: ProceedingJoinPoint is only supported for around advi ...

  8. 内网ntp时间同步配置

    选择局域网中的一台机器作为ntp服务器,在ntp server上安装并启动ntpd客户端上要关闭ntpd,安装ntpdateCentOS7上这两个软件都是自带的,只需根据需要打开或者关闭.注意客户端机 ...

  9. matlab里面如何保留小数特定位数

    [转载]Matlab取整函数有: fix, floor, ceil, round.取整函数在编程时有很大用处. 一.取整函数 1.向零取整(截尾取整) fix-向零取整(Round towards z ...

  10. PowerShell Empire使用笔记

    ##安装过程 git clone https://github.com/EmpireProject/Empire.git cd Empire cd setup sudo ./install.sh ## ...