attr value in table element

Question

I have a table with attr which I don't know how to get:

<ul id="myTable" >
    <li><span data-myData="01">first value</span></li>
    <li><span data-myData="02">second value</span></li>
</ul>
<button id = "myButton"> click me </button>

in jQuery, when element is selected and clicking the button:

$(document).on('click', '#myButton', function() {  
 var tableLength = $('#myTable li').length;
 for(var m=0; m<=tableLength; m++){
     if($('#myTable li' + ":nth-child(" + (m+1) + ")").hasClass('selected')){
        var valor = $('#myTable li' + ":nth-child(" + (m+1) + ")").text(); //works
        var id = $('#myTable li' + ":nth-child(" + (m+1) + ")").attr("data-myData"); // doesn't work
  
     }
   } 
});

How can I get the value?

Possible duplicate of [get value of an attribute of the clicked element](http://stackoverflow.com/questions/5205411/get-value-of-an-attribute-of-the-clicked-element) — Liam, Nov 14 '16 at 10:02
The `data-myData` attribute is on the `span`, not the `li`. I'd also suggest you look in to the `each()` method as you can tidy that code up quite easily — Rory McCrossan, Nov 14 '16 at 10:02
Possible duplicate of [How to get the data-id attribute?](http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — Nick, Nov 14 '16 at 10:03
[this might help you](http://stackoverflow.com/questions/12226311/get-value-of-a-custom-attribute-using-javascript-or-jquery) — Kevin Kloet, Nov 14 '16 at 10:03

score 1 · Answer 1 · answered Nov 14 '16 at 10:08

With this #myTable li' + ":nth-child(" + (m+1) + ") you select the li not the span. The jquery text function works on li, actually it rewrite the li's content and remove the span inside.

Change this#myTable li' + ":nth-child(" + (m+1) + ")" into this #myTable li' + ":nth-child(" + (m+1) + ") span"

score 1 · Accepted Answer · answered Nov 14 '16 at 10:10

The main issue with your code is that the data attribute is on the span, not the li, hence your code returns undefined.

Also note that you can tidy your code up with the use of each() and the :gt selector to avoid the first li in the ul. Try this:

$(document).on('click', '#myButton', function() {
  $('#myTable li:gt(0)').each(function() {
    var $li = $(this);
    var valor = $li.text();
    var id = $li.find('span').data('mydata'); // note data() and lowercase property name
    
    console.log(valor);
    console.log(id);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="myTable">
  <li><span data-myData="01">first value</span></li>
  <li><span data-myData="02">second value</span></li>
  <li><span data-myData="03">third value</span></li>
</ul>
<button id="myButton">click me</button>

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

Firstly : It's not a table. UL is a list.

Secondly : Simple search, simple answer : Get the pure text without HTML element by javascript?

Thirdly : Keep your JS simple!

var allSpan = $('#myTable li span') // Contain all span
allSpan.each(function() { console.log(this.innerHTML+ " | "+ this.getAttribute("data-myData")) });

edited May 23 '17 at 12:01

Community

1
1

answered Nov 14 '16 at 10:17

Aks

395
3
11

score 0 · Answer 4 · answered Nov 14 '16 at 10:17

First of all it is not a table , it is <ul> ,Please find below the snippet and change attribute to lowercase as in snippet

$('span').click(function() {
    alert($(this).data('mydata'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="myTable">
  <li><span data-mydata='01'>first value</span></li>
  <li><span data-mydata='02'>second value</span></li>
  <li><span data-mydata='03'>third value</span></li>
</ul>
<button id="myButton">click me</button>

Same you can use for button

score 0 · Answer 5 · answered Nov 14 '16 at 10:18

0

You can use .map

 $("#myTable li span").map(function() {
    var a = $(this).attr("data-myData");
    alert(a);
 }).get();

answered Nov 14 '16 at 10:18

A. Jain

167
8

score 0 · Answer 6 · answered Nov 14 '16 at 10:18

use this code .it will work definetly:

   $(document).on('click', '#myButton', function() {  
     $.each('#myTable li',function(i,v){
       if($(this).hasClass('selected'))
            {
                 var valor = $(this).find('span').text();
                 var id = $(this).find('span').attr('data-myData');
            }

     });
  });

attr value in table element

6 Answers6