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,18 +1,27 @@
+/*
+* 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);
-tables.forEach(t => {
+   cell.appendChild(elem);            
-   const table = document.querySelector(t.id);
+}
 
 /*
-   * Récupère le texte des entêtes de colonnes
+* Get text in columns thead
 */
-   const theadContent = i => { 
+const theadContent = (table, i) => { 
    const thead = table.querySelectorAll(".thead .td");
    let content;
    thead.forEach((item, j) => { 
@@ -23,16 +32,6 @@ tables.forEach(t => {
    return content;
 };
 
-   /*
-   * Ajoute un nouvel élément thead dans une cellule 
-   */
-   const createHeadInto = (cell, i) => {
-      const elem = document.createElement("div");
-      elem.classList.add("head");
-      elem.innerHTML = theadContent(i);
-      cell.appendChild(elem);            
-   }
-   
 /*
 * Remove heads from element
 */
@@ -44,18 +43,37 @@ tables.forEach(t => {
 };
 
 /*
-   * Règle pour les écrans moyens
+*  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}`);
+   
+   /*
+   * Responsive rules limits
+   */
+   const minLG = window.matchMedia(`(min-width: ${t.md_lg + 1}px)`); 
+   const maxMD = window.matchMedia(`(max-width: ${t.md_lg}px)`); 
+   const maxSM = window.matchMedia(`(max-width: ${t.sm_md}px)`);
+   
+   /*
+   * Medium screens rule
    */
    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; }