• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 127
  • Last Modified:

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

0
Michael Sterling
Asked:
Michael Sterling
  • 8
  • 7
1 Solution
 
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
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now