遍历表格以查找特定的ID

Question

I have a table that I'm trying to insert a paypal button in the last cell of the table which is blank. I'm not sure how many rows will be in the table and I have the id's hard coded now which works. The id's begin with el and a number for each row then _qryMyReservedSlots_Payment

['#el1_qryMyReservedSlots_Payment', '#el2_qryMyReservedSlots_Payment', '#el3_qryMyReservedSlots_Payment'].forEach(function(selector) {
        paypal.Button.render({ 
        ...paypal code...
        });
});  

to be more efficient, how can I loop through the id's so I don't have to hard code them?
Scott

Answer 1

Use a for loop:

for (var el = 1; el < 4; el++) {
    var selector = `#el${el}_qryMyReservedSlots_Payment`
    ...
}

or more old-fashioned:

for (var el = 1; el < 4; el++) {
    var selector = '#el' + el + '_qryMyReservedSlots_Payment'
    ...
}

Answer 2

I'm not sure how many rows will be in the table and I have the id's hard coded now which works

Use querySelectorAll and attribute contains selector - *

var allRows = document.querySelectorAll( "tr[id*='qryMyReservedSlots_Payment']");
Array.from( allRows ).forEach( function(rowElement){
  //logic with rowElement
})

Answer 3

Do you need them to have unique ids ? You should give them a class and then do something like document.getElementsByClassName(className).forEach(...) .

If you insist on having unique ids (which, again, is not needed and this is exactly one of the reasons why we have classes), your could would be something like this:

while (document.getElementById(`el${ counter++ }_qryMyReservedSlots_Payment`)) {
  paypal.Button.render({ 
    ...paypal code...
  });
}

Again, this is not good because each time you query the id, you are hitting the DOM. You should really get it all at once, manipulate in-memory, and then commit all your changes in as few DOM calls as possible.