Javascript Select anchors with attributes that contain word

Question

I am trying to only select a specific set of links in a table. I figure that the best way to do it is by selecting them by the title attribute that contains all contain the word 'ULD'.

Here is my code the allowed me to narrow it down to all links in a table but no further. I tried querySelectorAll() and selectElementsbyTitle but had no luck. Also keep in mind this needs to work in IE11 and no JQuery.

var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a");

Here are the links I want to select out of the following table:

<A
                        CLASS="ESR-Ajax"
                        TITLE="View ULD B1769SELAZ5 detail"
                        HREF="Javascript:void(0)"
                        AJAX-FUNCTION="Shared_ULDDetail"
                        intMasterReferenceNumber="5433550294352748012"
                        intULDReferenceNumber="-5893118207572745590"
                        strULDTypeCode="01"
                        dtmReportDate="2018-12-14"
                        intPageNumber="1">
                        B1769SELAZ5 
                        </A>

Here is a sample of the table:

Missed Bag Report

<img src="../Content/images/icons/excel.gif" border="0" alt="Click to export to excel." title="Click to export to excel." height="13" width="13">

            </a>

        </SPAN>
        <SPAN CLASS="CaptionRight">
            <SPAN ID="Func15543_PagingControlOne"></SPAN>
        </SPAN>
    </CAPTION>
    <THEAD>
    <TR>
        <TH ROWSPAN="2">#</TH>
        <TH COLSPAN="5">Destination</TH>
        <TH ROWSPAN="2">Load<BR>Create<BR>Sort</TH>
        <TH ROWSPAN="2">Bag Close Time</TH>
        <TH ROWSPAN="2">Age > 90 min (Red)</TH>
        <TH ROWSPAN="2">Bag Tag #</TH>
        <TH ROWSPAN="2">Pkgs<BR>in<BR>Bag</TH>
    </TR>
    <TR>
        <TH>Cntry<BR>Code</TH>
        <TH>SLIC</TH>
        <TH>Sort</TH>
        <TH>Serv Lvl</TH>
        <TH>Location</TH>
    </TR>
    </THEAD>

    <TBODY>


        <TR>
            <TD CLASS="CenterText ">1</TD>
            <TD CLASS="CenterText ">US</TD>
            <TD CLASS="CenterText ">4009 </TD>
            <TD CLASS="CenterText ">D</TD>
            <TD CLASS="CenterText ">2DA</TD>
            <TD CLASS="CenterText ">GRADE LANE HUB                                    </TD>
            <TD CLASS="CenterText ">T</TD>
            <TD CLASS="CenterText ">
            12/14/18 4:12 PM
            </TD>

                <TD CLASS="WhiteText CenterText G_CLR_Green5 ">
                      56 Mins. Old
            </TD>
            <TD CLASS="CenterText ">
                <A
                CLASS="ESR-Ajax"
                TITLE="View ULD B1769SELAZ5 detail"
                HREF="Javascript:void(0)"
                AJAX-FUNCTION="Shared_ULDDetail"
                intMasterReferenceNumber="5433550294352748012"
                intULDReferenceNumber="-5893118207572745590"
                strULDTypeCode="01"
                dtmReportDate="2018-12-14"
                intPageNumber="1">
                B1769SELAZ5 
                </A>
            </TD>
            <TD class="CenterText ">       6</TD>
        </TR>



        <TR>
            <TD CLASS="CenterText G_CLR_6">2</TD>
            <TD CLASS="CenterText G_CLR_6">US</TD>
            <TD CLASS="CenterText G_CLR_6">0759 </TD>
            <TD CLASS="CenterText G_CLR_6">N</TD>
            <TD CLASS="CenterText G_CLR_6">GRD</TD>
            <TD CLASS="CenterText G_CLR_6">SADDLEBROOK                                       </TD>
            <TD CLASS="CenterText G_CLR_6">T</TD>
            <TD CLASS="CenterText G_CLR_6">
            12/14/18 4:15 PM
            </TD>

                <TD CLASS="WhiteText CenterText G_CLR_Green5">
                      53 Mins. Old
            </TD>
            <TD CLASS="CenterText G_CLR_6">
                <A
                CLASS="ESR-Ajax"
                TITLE="View ULD B1769SEL3I0 detail"
                HREF="Javascript:void(0)"
                AJAX-FUNCTION="Shared_ULDDetail"
                intMasterReferenceNumber="5433550294352748012"
                intULDReferenceNumber="8922482455613715109"
                strULDTypeCode="01"
                dtmReportDate="2018-12-14"
                intPageNumber="1">
                B1769SEL3I0 
                </A>
            </TD>
            <TD class="CenterText G_CLR_6">       6</TD>
        </TR>

KevBot · Answer 1 · 2018-12-14T22:54:35.673

1

You can use querySelectorAll with an attribute selector [attr] and a contains flag *=:

var table = document.querySelector('table');
var links = table.querySelectorAll('a[title*="ULD"]');

console.log(links);

<table>
  <tr>
    <td><a href="" title="ab ULD cd">One</a></td>
    <td><a href="" title="abcd ULD">Two</a></td>
    <td><a href="" title="abcd">Three</a></td>
  </tr>
</table>

edited Dec 14 '18 at 22:54

answered Dec 14 '18 at 22:49

KevBot

17,900
5
50
68

I get the following: Error: Object doesn't support property or method 'querySelectorAll' – bentsh Dec 14 '18 at 22:54
@bentsh Are you sure you have selected the table and it is stored in `tabl`, or did the result come back as `null`? – KevBot Dec 14 '18 at 22:56
Here is my code: var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.querySelectorAll('a[title*="ULD"]'); – bentsh Dec 14 '18 at 23:02
I tried this as well: var tabl = document.querySelector('table');var anchors = tabl.querySelectorAll('a[title*="ULD"]'); – bentsh Dec 14 '18 at 23:05
Try checking if you're finding the element: `var tabl = document.getElementById("Func15543_tblMissedBagReport"); console.log(tabl)`. If the `console.log` outputs `null`, then the id is not correct for the table – KevBot Dec 14 '18 at 23:12
Well the following code does work it is just not granular enough in that it selects all the links contained in the table. var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a"); – bentsh Dec 14 '18 at 23:16
Has querySelectorAll been overridden? `console.log (HTMLElement.prototype.querySelectorAll)`. Or you can try something [like this SO question/answer](https://stackoverflow.com/questions/25565032/object-doesnt-support-property-or-method-queryselector-in-ie-10): – KevBot Dec 14 '18 at 23:20

Javascript Select anchors with attributes that contain word

1 Answers1