从“this”关键字获取属性时，在 javascript 中迭代双“for-each”function 返回未定义

Question

This must be a stupid question, but I am not able to figure anything to do about it.

I have a simple HTML table with every element having a property 'data-value'. I need to do some operations based on that, but one column at a time. Hence, I wrote a function which only runs on the first td element of each row. I am getting the rows by running another for each function.

When I use console.log($(this)) , I am getting the expected td element from the all the first columns. Now, I want to store the 'data-value' property in another variable and do stuff on it.

  $(this).find('td:first-of-type').each(function() {
    console.log($(this));
    //returns td object
  })
});

As seen here, all the td elements are correctly being logged on console.

But when I use jquery to get the property 'data-value' from it, I get undefined.

What could be the error? Is this the best way to iterate every column's tds property?

 $('#table_canvas tbody tr').each(function() { $(this).find('td:first-of-type').each(function() { console.log($(this)); //returns td object }) }); $('#table_canvas tbody tr').each(function() { $(this).find('td:first-of-type').each(function() { console.log($(this).attr('data-value')); //returns tr object which does not have the 'data-value'property }) });

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <h2>HTML Table</h2> <table id="table_canvas" class="table table--bordered" style="width: 100%; height: 100%;"> <thead> <tr style="text-align: right;"> <th></th> <th>first_name</th> <th>is_staff</th> <th>last_name</th> </tr> <tr> <th>id</th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <th hello="hi">1</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>3</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>4</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>5</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>6</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>7</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> </tbody> </table>

Answer 1

its been awhile i dont use javascript but i think this is work for you vanilla js

just select every second child of every tr tag

document.querySelectorAll('#table_canvas tr td:nth-child(2)').forEach( x => {
    console.log(x.dataset.property);
})

Answer 2

Here's a simple way to obtain the data, using vanilla JavaScript:

1. form array of <tr> elements
2. map tr array to array of td data-property values

 // array of <tr> elements let trs = Array.from(document.querySelectorAll('#table_canvas tbody tr')); // array of 'data-property' values let props = trs.map(tr => tr.querySelector('td').dataset.property); console.log('props:', JSON.stringify(props));

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

 <table id="table_canvas" class="table table--bordered" style="width: 100%; height: 100%;"> <thead> <tr style="text-align: right;"> <th></th> <th>first_name</th> <th>is_staff</th> <th>last_name</th> </tr> <tr> <th>id</th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <th hello="hi">1</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>3</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>4</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>5</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>6</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> <tr> <th>7</th> <td data-property="1">1</td> <td data-property="True">True</td> <td data-property="1">1</td> </tr> </tbody> </table>