如何使用jquery获取data-attribute的值

时间：2021-04-08 20:33:11

I need to get the value of userid, data-attribute from a html table and put this value into a var, but I wanna to this action without click action.

我需要从html表中获取userid,data-attribute的值并将此值放入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>

I have tried to do this like that, but the rowId is undefined.

我试图这样做,但rowId是未定义的。

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

3 个解决方案

#1

2  

only Remove [] :

仅删除[]:

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

Final code :

最终代码:

<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>

#2

3  

Simply, you can manage data attribute & value in HTML tag using data() method of jQuery. Alternatively, you can use attr() method also,

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

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

Alternatively

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.

.data()方法用于存储与匹配元素关联的任意数据,或者在命名数据存储中返回匹配元素集中第一个元素的值。

Initial HTML

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

Add data-attribute with value

使用值添加data-attribute

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

Alternatively

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

Reproduced HTML

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

Get value from data-attribute

从data-attribute获取值

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

Alternatively

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

Change value of data-attribute

更改数据属性的值

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

Alternatively

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

Reproduced HTML

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

Remove data-attribute You can remove data attribute using removeData() method

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

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

Alternatively

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

Reproduced HTML

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

#3

1  

you just have to remove the square brackets:

你只需删除方括号:

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>

i also added en example with .data()

我还添加了.data()的示例

#1

2  

only Remove [] :

仅删除[]:

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

Final code :

最终代码:

<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>

#2

3  

Simply, you can manage data attribute & value in HTML tag using data() method of jQuery. Alternatively, you can use attr() method also,

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

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

Alternatively

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.

.data()方法用于存储与匹配元素关联的任意数据,或者在命名数据存储中返回匹配元素集中第一个元素的值。

Initial HTML

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

Add data-attribute with value

使用值添加data-attribute

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

Alternatively

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

Reproduced HTML

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

Get value from data-attribute

从data-attribute获取值

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

Alternatively

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

Change value of data-attribute

更改数据属性的值

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

Alternatively

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

Reproduced HTML

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

Remove data-attribute You can remove data attribute using removeData() method

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

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

Alternatively

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

Reproduced HTML

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

#3

1  

you just have to remove the square brackets:

你只需删除方括号:

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>

i also added en example with .data()

我还添加了.data()的示例

标签：

相关文章