improve

index3.html

@@ -111,7 +111,15 @@
    </div>
    
    <script type="text/javascript">
-      const tables = [{id: '#my-table'}, {id: '#other-table'}];
+      const tables = [{
+         id: 'my-table', 
+         sm_md: 450, 
+         md_lg: 800 
+      },{
+         id: 'other-table',
+         sm_md: 450,
+         md_lg: 800
+      }];
    </script>
    <script src="js/index3.js"></script>
 </body>

js/index3.js

@@ -1,61 +1,79 @@
+/*
+* Add heads elements into row
+*/
+const createHeadsIntoRow = (table, row) => {
+   const cells = row.querySelectorAll(".td");
+   cells.forEach((cell, i) => {
+      createHeadIntoCell(table, cell, i);
+   });
+};
 
 /*
-* Limites de basculements
+* Add head into cell
 */
-const minLG = window.matchMedia("(min-width: 801px)"); 
+const createHeadIntoCell = (table, cell, i) => {
-const maxMD = window.matchMedia("(max-width: 800px)"); 
+   const elem = document.createElement("div");
-const maxSM = window.matchMedia("(max-width: 450px)");
+   elem.classList.add("head");
+   elem.innerHTML = theadContent(table, i);
+   cell.appendChild(elem);            
+}
 
+/*
+* Get text in columns thead
+*/
+const theadContent = (table, i) => { 
+   const thead = table.querySelectorAll(".thead .td");
+   let content;
+   thead.forEach((item, j) => { 
+      if (i === j) {
+         content = item.textContent;
+      }
+   }, i);
+   return content;
+};
+
+/*
+* Remove heads from element
+*/
+const removeHeadsFrom = (element) => {
+   const heads = element.querySelectorAll(".head");
+   heads.forEach(head => {
+      head.parentNode.removeChild(head);
+   });
+};
+
+/*
+*  Insert head before cell
+*/
+const insertHeadBeforeCell = (row, cell) => {
+   let head = cell.querySelector('.head');
+   head.classList.add("td");
+   row.insertBefore(head, cell);
+};
+
+/*
+* Loop on each table
+*/
 tables.forEach(t => {
-   const table = document.querySelector(t.id);
+   const table = document.querySelector(`#${t.id}`);
    
    /*
-   * Récupère le texte des entêtes de colonnes
+   * Responsive rules limits
    */
-   const theadContent = i => { 
+   const minLG = window.matchMedia(`(min-width: ${t.md_lg + 1}px)`); 
-      const thead = table.querySelectorAll(".thead .td");
+   const maxMD = window.matchMedia(`(max-width: ${t.md_lg}px)`); 
-      let content;
+   const maxSM = window.matchMedia(`(max-width: ${t.sm_md}px)`);
-      thead.forEach((item, j) => { 
-         if (i === j) {
-            content = item.textContent;
-         }
-      }, i);
-      return content;
-   };
    
    /*
-   * Ajoute un nouvel élément thead dans une cellule 
+   * Medium screens rule
-   */
-   const createHeadInto = (cell, i) => {
-      const elem = document.createElement("div");
-      elem.classList.add("head");
-      elem.innerHTML = theadContent(i);
-      cell.appendChild(elem);            
-   }
-   
-   /*
-   * Remove heads from element
-   */
-   const removeHeadsFrom = (element) => {
-      const heads = element.querySelectorAll(".head");
-      heads.forEach(head => {
-         head.parentNode.removeChild(head);
-      });
-   };
-
-   /*
-   * Règle pour les écrans moyens
    */
    const mediumScreen = rule => {
       if (rule.matches) { 
          console.log('medium');
          const rows = [...table.querySelectorAll(".tr")];
          rows.shift(); // vire le premier rang
-         rows.forEach(row => {;
+         rows.forEach(row => {
-            const cells = row.querySelectorAll(".td");
+            createHeadsIntoRow(table, row);
-            cells.forEach((cell, i) => {
-               createHeadInto(cell, i);
-            });
          });
       } else { 
          console.log('not medium');
@@ -64,7 +82,7 @@ tables.forEach(t => {
    };
    
    /*
-   * Règle pour les petits écrans
+   * Small screens rule
    */
    const smallScreen = (rule) => {
       if (rule.matches) {
@@ -73,10 +91,8 @@ tables.forEach(t => {
          rows.shift();
          rows.forEach(row => {;
             const cells = row.querySelectorAll(".td");
-            cells.forEach((cell, i) => {
+            cells.forEach(cell => {
-               let head = cell.querySelector('.head');
+               insertHeadBeforeCell(row, cell);
-               head.classList.add("td");
-               row.insertBefore(head, cell);
             });
          });
       } else {
@@ -85,11 +101,9 @@ tables.forEach(t => {
          rows.shift();
          rows.forEach(row => {;
             removeHeadsFrom(row);
+            // Large screen exception !
             if (!minLG.matches) {
-               const cells = row.querySelectorAll(".td");
+               createHeadsIntoRow(table, row);
-               cells.forEach((cell, i) => {
-                  createHeadInto(cell, i);
-               });
             }
          });
       }

scss/styles3.scss

@@ -31,7 +31,7 @@ div.table {
          &:nth-child(1) {
             border-left: 1px solid grey;
          }
-         &:nth-child(1) { flex: 1; }  // les largeurs de colonnes
+         &:nth-child(1) { flex: 1; } 
          &:nth-child(2) { flex: 4; }
          &:nth-child(3) { flex: 6; }
          &:nth-child(4) { flex: 2; }