How to get id using Javascript?

147 Views Asked by At

How can I extract the text: mytr161 if what is known to me is this text: 8039089332

<tr bgcolor="#dcdcdc" id="mytr161">     
            
                <td align="right" bgcolor="#BDB9B4"><input type="checkbox" id="ck161" name="ck161" value="1" onclick="javascript:changebgcolor('161');"></td>       
                <td align="center" nowrap=""><small><font size="2">
                <a href="MfSchOpen850PODetail.asp?lpo=8039089332&amp;litem=hidingit&amp;Plant=hidingitaswell&amp;lsimplifyordertype=hidden" target="Podetail">8039089332</a>
                </font></small>&nbsp;</td>

I have a list of numbers like the text: 8039089332. I want to click the checkmark next to it. To do that I am thinking how to write a javascript code to loop through the list of numbers, and click checkmark, I think, firstly need to find the id of the text: 8039089332. And then probably find a way to trim the id by removing the text 'mytr' and replacing it by 'ck'. This is my first attempt at javascript, I have no idea what to do at this point because I am unable to extract the id for the list of numbers that I have.

2

There are 2 best solutions below

4
JefS42 On BEST ANSWER

Since you're not clicking the checkbox, but want to programmatically "click" them based on the link text

function checkTheBox(searchText) {
    // find an <a> tag that has the text to find
    var xpath = "//a[text() = '" + searchText + "']";
    var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (matchingElement) {
        // get the <tr> and trim the "mytr" off of it's id
        trID = matchingElement.closest('tr').id.replace(/mytr/,'');
        // now mark the box checked for that "ck" id
        document.getElementById('ck'+trID).checked = true;
    }
}

Then, if you want to loop over every a tag, find the text, find the ID...

for (const a of document.querySelectorAll("a")) {
  checkTheBox(a.innerHTML);
}

May want to adjust the for loop instead of document.querySelectAll, maybe target only the table...

Borrowed a lot from https://stackoverflow.com/a/29289196/18392362 plus the "closest('tr')" mentioned above.

Update Since you have a list of numbers you want to find and then check the checkbox:

var myList = [
 '8039089332',
 'xx42xxxx',
 '1123581321'
];
// don't use for (i in ...) adjustment :)
for (var i = 0; i < myList.length; i++) { 
   checkTheBox(myList[i]);
}

https://jsfiddle.net/jefs42/ycda4s2m/5/

1
ahmad rabbani On
 // Get the closest <tr> element to the button

var closestTR = button.closest('tr');
    
 // Get the id attribute of the closest <tr>
var trId = closestTR.id;
    
  // Do something with the extracted id (for example, log it to the console)
 console.log('TR ID:', trId);