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

Engage with and rearrange JSON data

Validation of Email Existence (Using Django and Javascript/Ajax)

The npm outdated -g command is producing an error message that states "Unable to read the length property of undefined"

Removing an Element in a List Using Jquery

Using CSS Clip Path to conceal elements

What other choices are available for the Angular ui-select2 directive?

Failure to display React component on screen

Issue with Backbone.Marionette: jQuery document.ready not executing when on a specific route

Removing a Dom element using stage.removeChild( )

Update the displayed locations on Google Maps by fetching and displaying marker data

The slider spills over the edges of the page

Vue.js axios method returns undefined; v-for directive fails to iterate - Issue on Wordpress site

Exploring NodeJS Express Routing Across Various URIs/URLs

Generate fresh JavaScript objects with customized properties

Tips for accessing child elements within an Angular component

Modifying the color of the highlighted selection in a dropdown select box

Clicking on the ActionButton will trigger the sending of an HTTP Request in this Firefox

Changing the text color of Material UI Accordion Summary upon expansion

What is the best way to use CSS 3 to resize and enlarge an image, such as sprite icons?

Sinon - using callbacks in stubbed functions leading to test method exceeding time limit