将 CSS 样式和媒体查询添加到动态生成的 HTML table 和 JavaScript

Question

我有一个 HTML table，它是用 JavaScript 动态创建和填充的。

我想将 CSS 样式和媒体查询动态应用到 HTML table。

我尝试过的方法。

我在单独的文件中定义了样式并在 HTML 文件中引用了它

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="style.css" rel="stylesheet" />
        <title>Document</title>
      </head>
      <body>
        <table id="data-tb"></table>
        <script>
            // JavaScript code goes here...
        </script>
      </body>
    </html>

CSS 样式和媒体查询样式不起作用。样式不适用于动态生成的 HTML table。

我在 HTML 文件中的 script 标签内定义了样式。

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="style.css" rel="stylesheet" />
        <title>Document</title>
      </head>
      <body>
        <table id="data-tb"></table>
        <script>
                document.head.innerHTML += `
      <style>
        body {
      font-family: "Open Sans", sans-serif;
      line-height: 1.25;
    }
    
    table {
      border: 1px solid #ccc;
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      width: 100%;
      table-layout: fixed;
    }
    
    table caption {
      font-size: 1.5em;
      margin: 0.5em 0 0.75em;
    }
    
    table tr {
      background-color: #f8f8f8;
      border: 1px solid #ddd;
      padding: 0.35em;
    }
    
    table th,
    table td {
      padding: 0.625em;
      text-align: center;
    }
    
    table th {
      font-size: 0.85em;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    
    @media screen and (max-width: 600px) {
      table {
        border: 0;
      }
    
      table caption {
        font-size: 1.3em;
      }
    
      table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }
    
      table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: 0.625em;
      }
    
      table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: 0.8em;
        text-align: right;
      }
    
      table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
    
      table td:last-child {
        border-bottom: 0;
      }
    }
    
    
      </style>`;
    
            // JavaScript code goes here...
        </script>
      </body>
    </html>

在第二种方法中，CSS 风格有效。但是屏幕 (max-width: 600px) 的媒体查询不起作用。

如何将 CSS 样式和媒体查询动态应用到 HTML table 创建并填充 JavaScript？

Answer 1

您可以使用 window.matchMedia 在 js 中检查媒体查询，然后添加这样的样式：

let myMediaQuery = window.matchMedia('(min-width: 768px)')

if (myMediaQuery.matches) {
  el.styles.background= "blue"
}

Answer 2

AhmadKZX 可以工作，但我更愿意在 CSS 中设置样式，然后在使用 javascript 添加元素时，将元素的属性设置为您想要的样式。可以重构代码以匹配您想要的任何内容。

const tr = document.createElement('tr');
const column1 = document.createElement('td');
const column2 = document.createElement('td');
const column3 = document.createElement('td');
const column4 = document.createElement('td');

column1.innerHTML = "03/44/33";
column2.innerHTML = "Visa 001";
column3.innerHTML = "#1,300,331";
column4.innerHTML = "1/22/33 - 12/55/33";
column1.setAttribute("data-label", "Date");
column2.setAttribute("data-label", "Account");
column3.setAttribute("data-label", "Amount");
column4.setAttribute("data-label", "Period");
tr.appendChild(column1);
tr.appendChild(column2);
tr.appendChild(column3);
tr.appendChild(column4);
document.querySelector('tbody').appendChild(tr);

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
}

table caption {
  font-size: 34px;
  margin: 8pxx 0 12px;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 5px;
}

table th,
table td {
  padding: 12px;
  text-align: center;
}

table th {
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {

  table caption {
    font-size: 24px;
  }
  
  table thead {
    border: none;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .13px;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 12px;
    text-align: right;
  }
  
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  

}

<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
    </tr>
  </thead>
  <tbody>
   
  </tbody>
</table>

Answer 3

我试图在 CSS 中创建一个简单的响应式 table。我发现 example code 需要将 header 标签硬编码到 <td></td> 标签上。但我想要一种在 window 调整大小时用 table headers 内容动态标记 <td></td> 标签的方法。

由于我是 CSS 和 JS 的新手，所以我不知道如何访问 HTML 元素的内容属性。 @Immaculata 的回答给了我一个提示。

请参阅下面的工作代码。

CSS：在@media 屏幕内定义并且 (max-width: 600px)

table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

HTML 和 JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/read-excel-file@4.x/bundle/read-excel-file.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="input" />
    <table>
      <caption>
        Table Title
      </caption>
    </table>
    <script>

      var input = document.getElementById("input");
      input.addEventListener("change", function () { 

        //Code to populate the HTML table goes here...

    });

      const mediaQuery = window.matchMedia("(max-width: 600px)");
      mediaQuery.addListener(onWindowChanged);

      function onWindowChanged(e) {
        if (e.matches) {
          const dataTable = document.querySelector("table");
        const thElements = dataTable.querySelectorAll("thead th");
        const tdLabels = Array.from(thElements).map((element) => element.innerText);
        dataTable.querySelectorAll("tbody tr").forEach((tr) => {
          Array.from(tr.children).forEach((td, index) =>
            td.setAttribute("data-label", tdLabels[index])
          );
        });
        }
      }
     
    </script>
  </body>
</html>

将 CSS 样式和媒体查询添加到动态生成的 HTML table 和 JavaScript

Add CSS style and media queries to dynamically generated HTML table with JavaScript

html

javascript

css

html-table

media-queries