The correct CSS selector.

What is the correct selector for to access the anchor tag in the following table in the first <td> of the table in the following HTML? I need to remove its href property/attribute. I know I need to use something like:

$("").removeAttr("href");

Open in new window


    <table id="example" class="display responsive nowrap dataTable no-footer dtr-inline" data-page-length="50" role="grid" aria-describedby="example_info" style="width: 100%;" width="100%" cellspacing="0">
        <thead>
            <tr role="row">
                <th class="dt-head-center dt-body-center std-id sorting_asc" data-orderable="true" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 128px;" aria-sort="ascending" aria-label="StudentID: activate to sort column descending">StudentID</th>
                <th class="dt-head-center dt-body-center sorting" data-orderable="true" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 166px;" aria-label="StudentName: activate to sort column ascending">StudentName</th>
                <th class="dt-head-center dt-body-center sorting" data-orderable="true" data-order="asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 213px;" aria-label="TimeIn: activate to sort column ascending">TimeIn</th>
                <th class="dt-head-center dt-body-center sorting" data-orderble="true" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 168px;" aria-label="TimeSignedIn: activate to sort column ascending">TimeSignedIn</th>
                <th class="dt-head-center dt-body-center sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 138px;" aria-label="Week Total: activate to sort column ascending">Week Total</th>
                <th class="dt-head-center dt-body-center sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 114px;" aria-label="Sign Out: activate to sort column ascending">Sign Out</th>
            </tr>
        </thead>

        <tbody>
            <tr role="row" class="odd">
                <td class="dt-body-center std-id sorting_1" tabindex="0"><a id="std-id" class="st-id" href="StudentAthleteInfo.aspx?StudentID=12345678">12345678</a></td>
                <td class=" dt-body-center">Test Test</td>
                <td class=" dt-body-center">1/29/2018 8:23:50 PM</td>
                <td class=" dt-body-center">0:00:00:02</td>
                <td class=" dt-body-center"><a id="12345678" href="StudentAthleteInfo.aspx?UserStatus=ADMIN&amp;StudentID=12345678&amp;showweektotal=y" class="glyphicon glyphicon-ok text-center hovr-link" style="color: green;"></a></td>
                <td class=" dt-body-center"><a href="SignInGrid.aspx?UserStatus=ADMIN&amp;TimeRecID=3289&amp;signout=y" class="glyphicon glyphicon-time text-center" style="color: red;"></a></td>
            </tr>
        </tbody>
    </table>

Open in new window

LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
$("#example tbody td:eq(0) a").removeAttr("href");

Open in new window

or if your document is well-formed (ID attributes mus be unique in a document) :
$("#std-id").removeAttr("href");

Open in new window


if you have more than one :
$("a[id='std-id']").removeAttr("href");

Open in new window

0
Michael SterlingWeb Applications DeveloperAuthor Commented:
I'm still able to hover over it and click on the link, any other suggestions?
0
leakim971PluritechnicianCommented:
Wait 10s before trying
setTimeout(function() {
     $("#example tbody td:eq(0) a").removeAttr("href");
}, 10*1000);

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Michael SterlingWeb Applications DeveloperAuthor Commented:
Ok, that worked. Not sure why though? And can we make it work without the pause/delay?
0
leakim971PluritechnicianCommented:
you can make it work without the pause/delay as soon you find the process build the page...
you can put that code at the end of the page :
<script>
$("#example tbody td:eq(0) a").removeAttr("href");
</script>
</body>
</html>

Open in new window

or inside head section :

<script>
jQuery(function($) {
    $("#example tbody td:eq(0) a").removeAttr("href");
});
</script>
</head>
<body>

Open in new window


or reduce the pause delay until it work but it's a bad practice. if you don't use a plugin to create the table the codes in this current answer should work
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
I changed the set time out to be 1 * 1000 and that seems to work pretty much instantly so I think that will suffice. I just saw a notification that you responded while I was typing this, so I'll take a look at your response.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
I am using the DataTable plugin for the table. I did reduce the time, and it did work. Why is that a bad practice?
0
leakim971PluritechnicianCommented:
it take 1s for you but maybe 1.5 on a 3G connexion
you should use the "initComplete" option, add it to your current options if you have some :
https://datatables.net/reference/option/initComplete

$('#example').dataTable( {
  "initComplete": function(settings, json) {
         $("#example tbody td:eq(0) a").removeAttr("href");
  }
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael SterlingWeb Applications DeveloperAuthor Commented:
Ok. I will give that a try as well. The piece to this that I didn't mention was that this does need to happen when the page is loading based on the value of a Session variable. So I don't think putting it above the <head></head> in the master page (I assumed that's where you meant) will solve the problem.
0
leakim971PluritechnicianCommented:
the "initComplete" is the best
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
Ok, how do I put boolean logic in the "initComplete" to check for the value of a Session variable and then perform this:

$("#example tbody td:eq(0) a").removeAttr("href");

if the value of the Session variable is "x" (for example)?
0
leakim971PluritechnicianCommented:
you don't need to change anything from your initial logic and code. just put the line code  in a setTimeout or initComplete.
if this is à new question, create à new thread please
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
Oh, no, not a new question, just curious. I've got this:

            $.ajax({
                "url": "SignInGrid.aspx/getData",
                "type": "POST",
                "contentType": "application/json; charset=utf-8",
                "dataType": "json",
                success: function (json) {
                    var table = $('#example').DataTable({
                        "initComplete": function (settings, json) {
                            $("#example tbody td:eq(0) a").removeAttr("href");
                        },
                        "columns": [

Open in new window


and that works, but it works all the time. I only want it to work when the value of a Session variable is a certain value. I can open a new question but I just figured you could help me put the boolean login inside correctly?
0
leakim971PluritechnicianCommented:
I see you create new question, if your initial issue (remove href with the good CSS selector) is solved, you should close this question.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thank you.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.