CODEWITHSUNDEEP
jquery
ByteBlocks
ByteBlocks

Reputation: 637

jQuery - Find element with custom attribute inside a table row

I have a table that looks like something below (just some pseudo code)

<table>
<tr><td>text11</td><td>text12</td><td><div customerid='1'>Customer 1</div></td></tr>
<tr><td>text21</td><td>text22</td><td><div>Customer 2</td></tr>
<tr><td><div customerid='2'>xxxx-yyyyy</div><td>text23</td><td>text33</td></tr>
</table>

I am iterating over each row of the table. I need to find out element in a row that has a custom attribute for example "customerid" as shown in above example. Few requirements of this search.

Here is what i was trying that seems to return "undefined" all the time.

rows = $(self.find('tbody tr').each(function (rowIndex, element) {
  var keyValue = getKeyValue($(element));                  
}));

function getKeyValue(row){
  return row.attr('customerid');
}

.attr method does not seem to work. I have debugged to verify that 'row' is actually correct table row and HTML is correct as well and contains a cell with a div that has my custom attribute on it. Any suggestions will be appreciated.

Thanks

Upvotes: 1

Views: 16544

Answers (1)

Jon
Jon

Reputation: 437854

Use the attribute selector [customerid] to find the element that has this attribute, whatever that might be.

For example, when iterating over each row you can do:

rows = $(self.find('tbody tr').each(function (rowIndex, element) {
    var keyValue = $(this).find("[customerid]").eq(0).attr("customerid");
}));

Or, you could start by finding all elements with a customer id and work backwards to find the rows in which they appear:

self.find('tbody tr [customerid]').each(function() {
    var keyValue = this.getAttribute("customerid");
    var $row = $(this).closest("tr");
});

Upvotes: 3

Related Questions