Set attributes for multiple elements with javascript

Question

So I have table:

<table class="checkout-list">
    <thead>
       <tr>
         <th class="checkout-title">item</th>
         <th class="checkout-title">amount</th>
         <th class="checkout-title">total</th>
       </tr>
     </thead>
     <tbody>
       <tr>
        <td class="checkout-info"></td>
        <td class="checkout-info"></td>
        <td class="checkout-info"></td>
       </tr>
       <tr>
          <td class="checkout-info"></td>
          <td class="checkout-info"></td>
          <td class="checkout-info"></td>
       </tr>
      </tbody>
</table>

And with javascript I want to take values from thead tr th and set them to tbody tr td as attributes. I tried this:

let title = [];
  document.querySelectorAll('.checkout-title').forEach(el => {
      title.push(el.innerHTML);
  });

  document.querySelectorAll('.checkout-info').forEach((el, index) => {
      el.setAttribute('data-title', title[index]);
   });

Bus as it is now I only manage to assign values to first tbody tr td child and second left with undefined it looks like this:

<tbody>
       <tr>
        <td class="checkout-info" data-title="item"></td>
        <td class="checkout-info" data-title="amount"></td>
        <td class="checkout-info" data-title="total"></td>
       </tr>
       <tr>
          <td class="checkout-info" data-title="undefined"></td>
          <td class="checkout-info" data-title="undefined"></td>
          <td class="checkout-info" data-title="undefined"></td>
       </tr>
</tbody>

How I should fix this undefined assignation?

Nitheesh · Accepted Answer · 2021-08-23 03:20:31Z

3

The issue with the code is, there are only three nodes with querySelector document.querySelectorAll('.checkout-title') and six nodes with querySelector document.querySelectorAll('.checkout-info'). That's why there is value for first 3 nodes and undefined for last three nodes.

You have to access nodes from title array with title[index % header.length] so that it will loop through the title twice and assign the attribute correctly

let title = [];
const header = document.querySelectorAll('.checkout-title');
header.forEach(el => {
  title.push(el.innerHTML);
});

const nodes = document.querySelectorAll('.checkout-info');
nodes.forEach((el, index) => {
  el.setAttribute('data-title', title[index % header.length]);
});

<table class="checkout-list">
  <thead>
    <tr>
      <th class="checkout-title">item</th>
      <th class="checkout-title">amount</th>
      <th class="checkout-title">total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="checkout-info"></td>
      <td class="checkout-info"></td>
      <td class="checkout-info"></td>
    </tr>
    <tr class="delivery_price">
      <td class="checkout-info"></td>
      <td class="checkout-info"></td>
      <td class="checkout-info"></td>
    </tr>
  </tbody>
</table>

edited Aug 23, 2021 at 3:20

answered Aug 20, 2021 at 6:59

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

2 Comments

Kourosh Raoufi Over a year ago

nice! solution but because the table has 3 column its works fine with % operator (its always return 0 to 2 ) but if you add one more column then code won't work

Nitheesh Over a year ago

@CyC0der As per the question the colum count for the header and body are same. If they are not same, then there should be some logic how the attributes are to be splitted.

Collectives™ on Stack Overflow

Set attributes for multiple elements with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related