How to select HTML element that has "data-name"

Question

I've tried a few suggestions from google but it's not working for me. I have a table and each tr has one td that has style set to none, i.e. it's invisible.

This is the html:

<tr class="grid-row grid-row-selected">
<td class="grid-cell" data-name="ChkSelected" style="display: none;"><input id="chkBulk" name="chkBulk" type="checkbox" value="true"><input name="chkBulk" type="hidden" value="false"></td><td class="grid-cell" data-name="Id">6382</td><td class="grid-cell" data-name="MembershipNumber">74073565</td><td class="grid-cell" data-name="DateReceived">24/07/2014 00:00:00</td><td class="grid-cell" data-name="Fullname">Esther Hills</td><td class="grid-cell" data-name="ApplicationType">CEng</td><td class="grid-cell" data-name="FirstCheckDoneBy">chrisw</td><td class="grid-cell" data-name="AssignedStaffMem"><b>
<select id="ddlStaff" name="ddlStaff"><option value="susang">Susan Goulding</option>
<option value="kevinm">Kevin Murphy</option>
<option value="fionas">Fiona Spinks</option>
<option value="marilynw">Marilyn Wharton</option>
<option value="pamellar">Pamella Rivadulla-Rey</option>
<option value="SARAHS">Sarah Saw</option>
<option value="warrenjl">Warren John-Lewis</option>
<option value="carolinh">Carolin Harvey</option>
<option value="RACHAELB">Rachael Boysen</option>
<option value="katem">Kate MacGregor</option>
<option value="christ">Christiaan Thelen</option>
</select>
           </b>
</td><td class="grid-cell" data-name=""><b> <a href="#" onclick="AssignStaff(6382, &quot; Esther Hills &quot;, 6382)">
         Assign</a> </b>
</td>    </tr>

I want to change this:

<td class="grid-cell" data-name="ChkSelected" style="display: none;">

So it's visible so the user can click the checkbox.

This is my code

 $(document).ready(function () {
            if ($(AssignOnBulk).is(':checked')) {
                $("#bulkAssign").show();
                alert($('td [data-name="ChkSelected"]').html());
                $('td.grid-cell [data-name="ChkSelected"]').show();
            }
            else {
                $("#bulkAssign").hide();
                $('[data-name="ChkSelected"]').hide();
            }
        });

This line is supposed to set all tds with data-name to style=diplay:block

  $('td.grid-cell [data-name="ChkSelected"]').show();

Anyone know to select elements with "data-name" attribute?

try removing the space between td.grid-cell and [data-name="... — HenningCash
– HenningCash, Commented Sep 1, 2014 at 11:32

Exlord · Accepted Answer · 2014-09-01 11:37:21Z

2

$('td.grid-cell [data-name="ChkSelected"]').show();

there is a space between cell and [ , in jquery selectors space means searching in the child elements so your selector is searching the elements inside the td with [data-name="ChkSelected"] and not the td itself.

this should work for you :

$('td.grid-cell[data-name="ChkSelected"]').show();

answered Sep 1, 2014 at 11:37

Exlord

5,4395 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nick gowdy Over a year ago

Thanks, your explanation helped me and your code works. It doesn't look complicated but I always forget syntax when it's more than selecting an ID or Class.

Amit · Accepted Answer · 2014-09-01 11:32:45Z

0

Use as

 $('td[class="grid-cell"][data-name="ChkSelected"]').show();

answered Sep 1, 2014 at 11:32

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Comments

xkeshav · Accepted Answer · 2014-09-01 12:01:47Z

0

TRY with jQuery .map and .data method, it will work for all td

$("td").map(function(i,e){
  var dn = $(e).data("name");
  if(dn === 'ChkSelected')
    $(e).show(); 
});

see working DEMO with extended example

edited Sep 1, 2014 at 12:01

answered Sep 1, 2014 at 11:30

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Collectives™ on Stack Overflow

How to select HTML element that has "data-name"

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related