The table headers in the second table do not match the queryAllSelector

Question

The table headers in the second table do not match the queryAllSelector

I've encountered an issue with my JavaScript snippet that displays a responsive table. When I use the snippet for a second table with the same class, the formatting gets messed up on mobile devices (try resizing your screen to see). It seems like the headers are not displaying correctly.

Does anyone know what could be causing this problem and how I can go about fixing it?

Here's the HTML code in question:

<table class="test">
                        <thead>
                            <tr>
                                <th>Bla</th>
                                <th>Bla</th>
                                <th>Bla</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Bla</td>
                                <td>Blabla</td>
                                <td>Blablabla</td>
                            </tr>
                        </tbody>                
                    </table>

<table class="test">
                            <thead>
                                <tr>
                                    <th>Not</th>
                                    <th>Not</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Twatwa</td>
                                    <td>Twatwa</td>
                                </tr>
                            </tbody>                
                        </table>

http://codepen.io/anon/pen/QbJqVv

Edit: Despite attempting the solution provided in another answer, the issue still persists. The second table now shows table headers, but they are incorrect as it just duplicates the headers from the first table.

javascript css

Answer 1

Answer №1

As mentioned previously, it is important to handle each table individually in order to avoid confusion. Using .querySelectorAll('.test th') will grab all the th elements without considering which table they belong to.

To better illustrate this concept, here is a straightforward example of how you can approach this situation:

// Loop through each .test element
[].forEach.call(document.querySelectorAll('.test'), function (table) {
  // Retrieve header contents
  var headers = [].map.call(table.querySelectorAll('th'), function (header) {
    return header.textContent.replace(/\r?\n|\r/, '');
  });

  // Iterate through each row in tbody
  [].forEach.call(table.querySelectorAll('tbody tr'), function (row) {
    // Handle each cell within the row
    [].forEach.call(row.cells, function (cell, headerIndex) {
      // Set the appropriate attribute
      cell.setAttribute('data-th', headers[headerIndex]);
    });
  });
});

Check out the demo for a visual representation: http://codepen.io/anon/pen/NqEXqe

Answer 2

As mentioned previously, it is important to handle each table individually in order to avoid confusion. Using .querySelectorAll('.test th') will grab all the th elements without considering which table they belong to.

To better illustrate this concept, here is a straightforward example of how you can approach this situation:

// Loop through each .test element
[].forEach.call(document.querySelectorAll('.test'), function (table) {
  // Retrieve header contents
  var headers = [].map.call(table.querySelectorAll('th'), function (header) {
    return header.textContent.replace(/\r?\n|\r/, '');
  });

  // Iterate through each row in tbody
  [].forEach.call(table.querySelectorAll('tbody tr'), function (row) {
    // Handle each cell within the row
    [].forEach.call(row.cells, function (cell, headerIndex) {
      // Set the appropriate attribute
      cell.setAttribute('data-th', headers[headerIndex]);
    });
  });
});

Check out the demo for a visual representation: http://codepen.io/anon/pen/NqEXqe

Answer 3

Answer №2

Initially, it's important to note that your HTML code is invalid as you have omitted closing tags for elements like

<tr><td></td></tr>

. It is recommended to adhere to proper HTML standards.

Furthermore, the usage of querySelectorAll is missing when targeting table bodies, resulting in only setting attributes for the first one located.

The revised snippet below addresses these issues and should accomplish your intended functionality.

var headertext = [],
headers = document.querySelectorAll(".test th"),
tablerows = document.querySelectorAll(".test th"),
tablebody = document.querySelectorAll(".test tbody");

for(var i = 0; i < headers.length; i++) {
  var current = headers[i];
  headertext.push(current.textContent.replace(/\r?\n|\r/,""));
} 

for (var tb = 0; tb < tablebody.length; tb++) {
  for (var i = 0, row; row = tablebody[tb].rows[i]; i++) {
    for (var j = 0, col; col = row.cells[j]; j++) {
      col.setAttribute("data-th", headertext[j]);
    } 
  }
}

Answer 4

Initially, it's important to note that your HTML code is invalid as you have omitted closing tags for elements like

<tr><td></td></tr>

. It is recommended to adhere to proper HTML standards.

Furthermore, the usage of querySelectorAll is missing when targeting table bodies, resulting in only setting attributes for the first one located.

The revised snippet below addresses these issues and should accomplish your intended functionality.

var headertext = [],
headers = document.querySelectorAll(".test th"),
tablerows = document.querySelectorAll(".test th"),
tablebody = document.querySelectorAll(".test tbody");

for(var i = 0; i < headers.length; i++) {
  var current = headers[i];
  headertext.push(current.textContent.replace(/\r?\n|\r/,""));
} 

for (var tb = 0; tb < tablebody.length; tb++) {
  for (var i = 0, row; row = tablebody[tb].rows[i]; i++) {
    for (var j = 0, col; col = row.cells[j]; j++) {
      col.setAttribute("data-th", headertext[j]);
    } 
  }
}

The table headers in the second table do not match the queryAllSelector

Answer №1

Answer №2

Similar questions

Validation method in jQuery for a set of checkboxes with distinct identifiers

Creating a diagonal effect on a table using jQuery

When using HTML5's checkValidity method, it may return a valid result even if

What is the best way to retrieve an object within a class?

Issue persists: Ajax functionality remains nonfunctional, prompting the need for

Fade out the jQuery message after a brief 2-second pause

React strict mode and Material UI console notifications

Creating personalized templates in DJANGO - Efficiently linking help_text to individual fields

Looking for assistance with CSS border animation

Issues with the functionality of the submit button (html, js, php)

Encountering a 404 error while loading CSS in a Django application

Execute JavaScript code once all the AngularJS template directives are fully loaded

Making an asynchronous request using Ajax to verify the status of a checkbox

Making a standard AJAX request using jQuery without including the XHR header

"Enhance your Vue 3 experience with a stylish Instagram Feed featuring

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

The content is being pushed down by the responsive navigation bar

A guide to retrieving the timezone based on a specific address using the Google API

How can I achieve transparency for an element while it is nested within multiple parent

Monitor changes in the visible price range in lightweight-chart