How to get a value of data-attribute with jquery

Question

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.

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

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

You may use $("#someTest tr").last().attr('data-userid'); OR even $('#someTest tr:last').attr('data-userid') — Sandeep J Patel
– Sandeep J Patel, Commented Sep 2, 2016 at 9:00
there's a typo .attr("[data-userid"]"); should be .attr("[data-userid]"); — pumpkinzzz
– pumpkinzzz, Commented Sep 2, 2016 at 9:03

Haresh Vidja · Accepted Answer · 2016-09-02 09:25:23Z

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

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.

Initial HTML

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

Add data-attribute with value

$('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

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

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

Alternatively

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

Reproduced HTML

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

Ehsan · Accepted Answer · 2016-09-02 09:09:55Z

4

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>

edited Sep 2, 2016 at 9:09

answered Sep 2, 2016 at 9:04

Ehsan

13k3 gold badges27 silver badges46 bronze badges

6 Comments

user6018902 Over a year ago

And how a get a specific userid?

Ehsan Over a year ago

@user6018902, explain with an example please.

Ehsan Over a year ago

@user6018902 , for example if you want get first userid,you can use of var rowId = $("#someTest tr").eq(0).attr("data-userid"); for For the second use var rowId = $("#someTest tr").eq(1).attr("data-userid");

user6018902 Over a year ago

I have to take a specific userid of the table depending on the row with the user that I change, in this part here, when I want to change the value of the editet user in the table I need to get the userid of row that I modified.

Ehsan Over a year ago

@user6018902, what is inside tr tag that you want change? text or checkbox or ...

|

Tarek Salah uddin Mahmud · Accepted Answer · 2016-09-02 09:12:17Z

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

Collectives™ on Stack Overflow

How to get a value of data-attribute with jquery

3 Answers 3

Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Related