Get href Value of an Anchor Tag In a Table

JavaScript
1

I have a gridview table that displays at most 25 table rows per page and each row consists of 3 TD element. In the three TDs of each row, the anchor tags href values look something like the following:
href = “primaryresource.aspx?resourceId=78”
href = “secondaryresource.aspx?resourceId=78”
href = “backupresource.aspx?resourceId=78”

I am trying to get the href of the first TD in each table row and use the resourceId in it as the ID for the row (TR tag). The first TD contains the primaryresource id unlike the others in the same row which contain secondary resource ids. I have tried the following but it seems to repeat the same resourceId instead of grabbing the primary resource ID from the first column in each row.

$(function () {      
      let rows;
      let id = '';            
      let links = $("[id*=GridView1] td a");
      rows = $("[id*=GridView1] tr");
      let link = '';

      for (let i = 0; i < links.length; i++) {
          link = $(links[i]).attr("href");
          id = link.substring(eval(link.indexOf('=') + 1));                    
          $(rows[i]).attr("id", 'rsc_' + (id)); 
      }
             
 });type or paste code here
2

Well your selector isnt right. That selects ALL td’s with a link in it. The TD’s you want are those that are the first child of the row…also why are you fuzzy-selecting the table?

links[i] is already a reference to the object, you don’t need to select it again. same with rows[i].

4

Hi there liagapi555,

does this very basic example help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#mytable {
    border-collapse: collapse;
    background-color: #fff;
 }

#mytable td {
    padding: 0.5em;
    border: 1px solid #999;
 }

#rsc_78 {
    background-color: #fee;
 }

#rsc_81 {
    background-color: #eef;
 }
</style>

</head>
<body> 
 <table id="mytable">
  <tbody>
   <tr>
    <td><a href="primaryresource.aspx?resourceId=78">78</a></td>
    <td><a href="secondaryresource.aspx?resourceId=78">78</a></td>
    <td><a href="backupresource.aspx?resourceId=78">78</a></td>
   </tr><tr>
    <td><a href="primaryresource.aspx?resourceId=79">79</a></td>
    <td><a href="secondaryresource.aspx?resourceId=79">79</a></td>
    <td><a href="backupresource.aspx?resourceId=79">79</a></td>
   </tr><tr>
    <td><a href="primaryresource.aspx?resourceId=80">80</a></td>
    <td><a href="secondaryresource.aspx?resourceId=80">80</a></td>
    <td><a href="backupresource.aspx?resourceId=80">80</a></td>
   </tr><tr>
    <td><a href="primaryresource.aspx?resourceId=81">81</a></td>
    <td><a href="secondaryresource.aspx?resourceId=81">81</a></td>
    <td><a href="backupresource.aspx?resourceId=81">81</a></td>
   </tr><tr>
    <td><a href="primaryresource.aspx?resourceId=82">82</a></td>
    <td><a href="secondaryresource.aspx?resourceId=82">82</a></td>
    <td><a href="backupresource.aspx?resourceId=82">82</a></td>
   </tr><tr>
    <td><a href="primaryresource.aspx?resourceId=82">83</a></td>
    <td><a href="secondaryresource.aspx?resourceId=83">83</a></td>
    <td><a href="backupresource.aspx?resourceId=83">83</a></td>
   </tr>
  </tbody>
 </table>

<script>
(function( d ) {
   'use strict';

   var c, myt = d.querySelector( '#mytable' ),
          lnk = myt.querySelectorAll( 'a' ), 
           tr = myt.querySelectorAll( 'tr' );

      for ( c = 0; c <lnk.length; c ++ ){
         if ( c % 3 === 0 ) {
              tr[ c / 3].id  = 'rsc_'+ lnk[ c ].href.substring( lnk[ c ].href.lastIndexOf( '=' ) + 1 );
            }
         }
}( document ));
</script>

</body>
</html>

coothead

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.