Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get a value of data-attribute with jquery

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"]");
like image 635
user6018902 Avatar asked Feb 06 '23 05:02

user6018902


2 Answers

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>
like image 51
Haresh Vidja Avatar answered Feb 09 '23 01:02

Haresh Vidja


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>
like image 40
Ehsan Avatar answered Feb 08 '23 23:02

Ehsan