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

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

Share Improve this question asked Sep 2, 2016 at 8:59 user6018902 1151 gold badge2 silver badges10 bronze badges

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

Add a comment |

3 Answers 3

Sorted by: Reset to default 9

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>

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>

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get a value of data-attribute with jquery - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)