如何使用 jquery 获取数据属性的值

Question

我需要从 html table 中获取用户 ID 和数据属性的值，并将此值放入 var，但我想在没有点击操作的情况下执行此操作。

  <table id="tblList">
    <tbody id="someTest">
      <tr data-userid="801992084067">
      <tr data-userid="451207954179">
      <tr data-userid="310896831399">
      <tr data-userid="863939754980">
      <tr data-userid="1123542226482">
    </tbody>
  </table>

我试过这样做，但是 rowId 未定义。

 var rowId = $("#someTest tr").last().attr("[data-userid"]");

Answer 1

简单地说，您可以使用 jQuery 的 data() 方法管理 HTML 标签中的数据属性和值。或者，您也可以使用 attr() 方法，

var rowId = $("#someTest tr").last().data("userid");

或者

var rowId = $("#someTest tr").last().attr("data-userid");

.data() method is used to store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

初始HTML

<button id="mybtn">MyButton</button>

添加具有值的数据属性

$('button#mybtn').data('id',10);

或者

$('button#mybtn').data('data-id',10);

转载HTML

<button id="mybtn" data-id="10">MyButton</button>

从数据属性中获取值

alert($('button#mybtn').data('id')); //alerts 10

或者

alert($('button#mybtn').attr('data-id')); //alerts 10

更改数据属性的值

$('button#mybtn').data('id',15);

或者

$('button#mybtn').attr('data-id',15);

转载HTML

<button id="mybtn" data-id="15">MyButton</button>

删除数据属性 您可以使用 removeData() 方法

删除数据属性

$('button#mybtn').removeData('id');

或者

$('button#mybtn').removeAttr('data-id');

转载HTML

<button id="mybtn">MyButton</button>

Answer 2

仅删除 [] :

 var rowId = $("#someTest tr").last().attr("data-userid");

最终代码：

<html>
    <title>This is test</title>
    
    <head>
    </head>
    <body>
        <table id="tblList">
    <tbody id="someTest">
      <tr data-userid="801992084067">
      <tr data-userid="451207954179">
      <tr data-userid="310896831399">
      <tr data-userid="863939754980">
      <tr data-userid="1123542226482">
    </tbody>
  </table>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
$(document).ready(function(){
    
   var rowId = $("#someTest tr").last().attr("data-userid");
    alert(rowId);
       
})
        </script>
    </body>
</html>

Answer 3

您只需删除 方括号:

var rowId = $("#someTest tr").last().attr("data-userid");
$('#rowidOutputAttr').text(rowId);
var rowId = $("#someTest tr").last().data("userid");
$('#rowidOutputData').text(rowId);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <table id="tblList">
    <tbody id="someTest">
      <tr data-userid="801992084067">
      <tr data-userid="451207954179">
      <tr data-userid="310896831399">
      <tr data-userid="863939754980">
      <tr data-userid="1123542226482">
    </tbody>
  </table>
    <div id=rowidOutputAttr></div>
    <div id=rowidOutputData></div>
  </body>
 </html>

我还添加了示例 .data()

如何使用 jquery 获取数据属性的值

How to get a value of data-attribute with jquery

javascript

jquery

custom-data-attribute