CODEWITHSUNDEEP
javascriptjquery
Jemo
Jemo

Reputation: 117

how to extract attribute value using javascript

I'm having trouble extracting "href" value of "LINE_NAME" (expected value is "www.link.com"). It's a content of a table which always has only header + 1 row, column order and number can be different though. "LINE_NAME" column is always there in the exact format

this call returns "undefined":

var url = $('.a-IRR-table tbody').children().eq(2).find('td[headers="LINE_NAME"] a').attr('href');

console.log(url);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="Search Results" class="a-IRR-table" id="79" style="margin-top: -45px;">
  <tbody>
    <tr>
      <th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="625" role="presentation">Av</a>
        <div class="t-fht-line"></div>
      </th>
      <th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="437" role="presentation">CS</a>
        <div class="t-fht-line"></div>
      </th>
      <th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="167" role="presentation">LINE_NAME</a>
        <div class="t-fht-line"></div>
      </th>
      <tr>
        <td class=" u-tC" headers="AVAILABLE" aria-labelledby="AVAILABLE">
          <img src="...png" alt="Av_ICON" title="Available" style="width:16px; padding-top:1px;">
        </td>
        <td class=" u-tL" headers="STATUS" aria-labelledby="STATUS">online</td>
        <td class=" u-tL" headers="LINE_NAME" aria-labelledby="LINE_NAME">
          <a href="www.link.com">url_link</a>
        </td>
      </tr>
  </tbody>
</table>

Upvotes: 0

Views: 144

Answers (2)

CHANist
CHANist

Reputation: 1402

var url = $('.a-IRR-table').find('td[headers="LINE_NAME"] a').attr('href');

console.log('url = ' + url);

should work

Upvotes: 0

cloned
cloned

Reputation: 6742

Your problem is that .eq() function from jQuery is 0 based, so to get the 2nd element you have to use .eq(1). 

var url = $('.a-IRR-table tbody').children().eq(1).find('td[headers="LINE_NAME"] a').attr('href');
console.log(url)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="Search Results" class="a-IRR-table" id="79">
	<tbody>
		<tr>
			<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="625" role="presentation">Av</a><div class="t-fht-line"></div></th>
			<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="437" role="presentation">CS</a><div class="t-fht-line"></div></th>
			<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="167" role="presentation">LINE_NAME</a><div class="t-fht-line"></div></th>
		<tr>
			<td class=" u-tC" headers="AVAILABLE" aria-labelledby="AVAILABLE">
				<img src="...png" alt="Av_ICON" title="Available" style="width:16px; padding-top:1px;">
				</td>
			<td class=" u-tL" headers="STATUS" aria-labelledby="STATUS">online</td>
			<td class=" u-tL" headers="LINE_NAME" aria-labelledby="LINE_NAME">
				<a href="www.link.com">url_link</a>
				</td>
		</tr>
	</tbody>
</table>

Upvotes: 4

Related Questions