前端：自定义属性data-*（jsp和springboot thymeleaf两种方法）

最近遇到一个前端问题，对于前端小白还是有点困扰的，本着解决了就记录下来的原则，就写一下以防忘记。

一、问题

相信很多刚学前端的小伙伴（大神略过）都遇到过制作一个表格，每行最后都需要跟一个操作栏（修改或删除），然鹅这条记录的因为使用的是<forech>，所以id是变化的，获取和绑定按钮就成了一个问题。

例如：（网上找的图。。）

 

二、解决方法

使用自定义属性可直接绑定然后使用js进行获取。

2.1 jsp的解决方法

直接在按钮中定义data-*属性：

例：

<a class="delete-btn" data-id="${item.id}" title="删除">删除</a>

可直接用js获取：

var id =  $(this).data('id');

注：以上this是在你已经获取该标签的前提下，才能知道这个this代指什么（这个地方坑了我一下），不然应该写成

var id = $(".delete-btn").data('id');//使用类选择器来找到该标签得到自定义属性

2.2 springboot thymeleaf解决办法

 由于springboot原生支持的是thymeleaf模板引擎，所以这个也说一下。

thymeleaf也是可以定义自定义属性的，但是定义方式与jsp不同，使用的是th:attr="data-*=${item.getId()}"，多个属性之间用逗号隔开。

例：

<button type="button" th:attr="data-id=${item.getId()}"  class="delete-btn" onclick="delete()">删除</button>

获取方法同上。