简单介绍: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. Mybatis映射文件的自动映射与手动映射问题

    Mapper XML 文件 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会 ...

  2. SpringCloud学习笔记:熔断器Hystrix(5)

    1. Hystrix简介 在分布式系统中,服务与服务之间相互依赖,一种不可避免的情况是某些服务会出现故障,导致依赖于它们的其他服务出现远程调度的线程阻塞. Hystrix提供熔断器功能,能够阻止分布式 ...

  3. Platform.Uno介绍

    编者语:Xamarin国内很多人说缺乏可用的实例,我在写书过程中在完善一些常用场景的例子,希望帮到大家.Build 2018结束一周了,善友问我要不要谈谈Xamarin的一些变化,但碍于时间有限一直没 ...

  4. python之数据类型补充、集合、深浅copy

    一.内容回顾 代码块: 一个函数,一个模块,一个类,一个文件,交互模式下,每一行就是一个代码块. is == id id()查询对象的内存地址 == 比较的是两边的数值. is 比较的是两边的内存地址 ...

  5. 存储引擎和表的操作(mysql中的数据类型、完整性约束)

    一.存储引擎 .概念 MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力. 通过选择不同的技术 ...

  6. 【LOJ6060】【2017 山东一轮集训 Day1 / SDWC2018 Day1】Set 线性基

    题目大意 给出 \(n\) 个非负整数,将数划分成两个集合,记为一号集合和二号集合.\(x_1\) 为一号集合中所有数的异或和,\(x_2\) 为二号集合中所有数的异或和.在最大化 \(x_1 + x ...

  7. python 10道面试陷阱题目

  8. C++ 动态链接库 DLL 的一些笔记

    DLL 文件源代码: // test.h #ifdef TEST_EXPORTS #define TEST_API __declspec(dllexport) #endif class TEST_AP ...

  9. yii2 or查询

    // 我们要查询id等于1或者id等于3的数据 $userInfo = User::find()->where(['or' , 'id = 1' , 'id = 3'])->all(); ...

  10. EOJ 306 树上问题

    题解: 因为w大于1,所以,题意就是,有多少(x,z),存在x到z的路径上,有一个x<y<z的y w没用的其实. 树上路径问题,有什么方法吗? 1.树链剖分.这个主要方便处理修改操作. 2 ...