CODEWITHSUNDEEP
jquery
gene
gene

Reputation: 2108

How to check if any row in the table has a button of type "submit"?

I have an asp page where gridview generates an html page.

This page has a table that may or may not contain "Edit" buttons on the rows.

How can I check if the table has these buttons?

I'm using the following logic:

if ($('#cphBody_gvBins').closest('tr').find('input[name=edit]').length > 0) {
   //do something
}

But it always returns false

The following fragment is my html table:

<table class="DataWebControlStyle" cellspacing="0" rules="all" border="1" id="cphBody_gvBins" style="border-collapse:collapse;">
        <tr class="ui-state-default" style="height:40px;">
            <th class="binGridHeader" scope="col" style="width:80px;"><a href="javascript:__doPostBack(&#39;ctl00$cphBody$gvBins&#39;,&#39;Sort$Bin&#39;)">Bin</a></th><th class="binGridHeader" scope="col" style="width:80px;">Min Value</th><th class="binGridHeader" scope="col" style="width:80px;">Max Value</th><th class="binGridHeader" scope="col" style="width:80px;"><a href="javascript:__doPostBack(&#39;ctl00$cphBody$gvBins&#39;,&#39;Sort$Currency&#39;)">Currency</a></th><th class="binGridHeader" scope="col" style="width:380px;"><a href="javascript:__doPostBack(&#39;ctl00$cphBody$gvBins&#39;,&#39;Sort$Description&#39;)">Description</a></th><th class="binGridHeader" scope="col" style="width:120px;"><a href="javascript:__doPostBack(&#39;ctl00$cphBody$gvBins&#39;,&#39;Sort$LastUpdated&#39;)">Last Updated</a></th><th class="binGridHeader" scope="col" style="width:160px;"><a href="javascript:__doPostBack(&#39;ctl00$cphBody$gvBins&#39;,&#39;Sort$LastUpdatedBy&#39;)">Last Updated By</a></th><th class="binGridHeader" scope="col" style="width:60px;">Relocate</th><th scope="col" style="width:140px;">&nbsp;</th>
        </tr><tr class="odd">
            <td>
                    <span id="cphBody_gvBins_lblBin_0">409275</span>
            </td><td>
                    <span id="cphBody_gvBins_lblMinVal_0">00</span>
            </td><td>
                    <span id="cphBody_gvBins_lblMaxVal_0">99</span>
            </td><td>
                    <span id="cphBody_gvBins_lblCurrency_0">PLN</span>
            </td><td>
                    <span id="cphBody_gvBins_Label22_0"></span>
            </td><td>
                    <span id="cphBody_gvBins_Label24_0">14/03/2019 12:13 PM</span>
            </td><td>
                    <span id="cphBody_gvBins_Label25_0">System</span>
            </td><td>
                    <input id="cphBody_gvBins_cbRelocateBin_0" type="checkbox" name="ctl00$cphBody$gvBins$ctl02$cbRelocateBin" />
            </td><td>
                <input type="submit" name="ctl00$cphBody$gvBins$ctl02$btnBinEdit" value="Edit" id="cphBody_gvBins_btnBinEdit_0" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
                <input type="submit" name="ctl00$cphBody$gvBins$ctl02$btnBinRemove" value="Remove" id="cphBody_gvBins_btnBinRemove_0" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            </td>

.
.
.
</table>

What is the right way to do it?

Upvotes: 0

Views: 82

Answers (2)

Tyler Roper
Tyler Roper

Reputation: 21672

In jQuery, .closest() traverses upwards through the element's ancestry to find the first element that satisfies the selector. As such, by doing $('#cphBody_gvBins').closest("tr"), you're looking for a <tr> that is a parent, grandparent, etc, of the gridview, rather than a child, grandchild, etc. As such, you need to remove it.

Additionally, you don't have an element with a name attribute of "Edit", so [name=Edit] will yield no results.

Instead, I'd suggest using a Contains Selector to lookup by ID: input[id*='btnBinEdit']

if ($('#cphBody_gvBins').find("input[id*='btnBinEdit']").length) {
  //the input was found
}

Upvotes: 0

Mo Star
Mo Star

Reputation: 231

This will give you the count of the edit input elements named ctl00$cphBody$gvBins$ctl02$btnBinEdit that are children of the element id #cphBody_gvBins. The name of your edit element is not edit.

$('#cphBody_gvBins').find(input[name="ctl00$cphBody$gvBins$ctl02$btnBinEdit]").length

Upvotes: 1

Related Questions