How to get a value of data-attribute with jquery

D

3

7

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"]");

Dejecta answered 2/9, 2016 at 8:59 Comment(4)

You may use $("#someTest tr").last().attr('data-userid'); OR even $('#someTest tr:last').attr('data-userid') – Babbette 2/9, 2016 at 9:0

or $("#someTest tr").last().data('userid'); – Phillisphilly 2/9, 2016 at 9:2

there's a typo .attr("[data-userid"]"); should be .attr("[data-userid]"); – Odontoid 2/9, 2016 at 9:3

or $("#someTest tr:last-child").data('userid'); – Spiritoso 2/9, 2016 at 9:4

C

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>

Capita answered 2/9, 2016 at 9:4 Comment(6)

And how a get a specific userid? – Dejecta 2/9, 2016 at 9:14

@user6018902, explain with an example please. – Capita 2/9, 2016 at 9:16

@Dejecta , 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"); – Capita 2/9, 2016 at 9:20

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. – Dejecta 2/9, 2016 at 9:27

@user6018902, what is inside tr tag that you want change? text or checkbox or ... – Capita 2/9, 2016 at 9:36

Yes, and I already have a object with edited value of row, but I don't know how to get the specific row to insert this 'new' value in the row that I select to edit. And a way to do this is using the data-userid from table, to know exact where to put the edited user information. – Dejecta 2/9, 2016 at 9:40

F

7

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>

Fortenberry answered 2/9, 2016 at 9:1 Comment(0)

C

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>

Capita answered 2/9, 2016 at 9:4 Comment(6)

And how a get a specific userid? – Dejecta 2/9, 2016 at 9:14

@user6018902, explain with an example please. – Capita 2/9, 2016 at 9:16

@Dejecta , 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"); – Capita 2/9, 2016 at 9:20

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. – Dejecta 2/9, 2016 at 9:27

@user6018902, what is inside tr tag that you want change? text or checkbox or ... – Capita 2/9, 2016 at 9:36

Yes, and I already have a object with edited value of row, but I don't know how to get the specific row to insert this 'new' value in the row that I select to edit. And a way to do this is using the data-userid from table, to know exact where to put the edited user information. – Dejecta 2/9, 2016 at 9:40

U

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

Unprovided answered 2/9, 2016 at 9:5 Comment(0)

Recommended topics

Hot tags