javascript - 如何编辑此表响应脚本？

Question

我正在使用此脚本自动使表格适应智能手机 View 。 它工作完美!但在某些页面中，我将有多个表，并且该脚本似乎仅适用于第一个表。 看我的例子，调整浏览器窗口的大小:http://elenatest.altervista.org/index.html

这是放入正文的 JS 代码:

<script type="text/javascript">
            var headertext = [],

            headers = document.querySelectorAll("#MyTable th"),
            tablerows = document.querySelectorAll("#MyTable th"),
            tablebody = document.querySelector("#MyTable tbody");

            for(var i = 0; i < headers.length; i++) {
                var current = headers[i];

                headertext.push(current.textContent.replace(/\r?\n|\r/,""));

            } 

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

有没有办法让这个脚本针对页面中的所有表运行？

编辑

我用 CLASS 更改了 ID。 JS代码如下:

<script type="text/javascript">
            var headertext = [],

            headers = document.querySelectorAll(".MyTable th"),
            tablerows = document.querySelectorAll(".MyTable th"),
            tablebody = document.querySelector(".MyTable tbody");

            for(var i = 0; i < headers.length; i++) {
                var current = headers[i];

                headertext.push(current.textContent.replace(/\r?\n|\r/,""));

            } 

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

显然在我的 HTML 中:

<table class="MyTable">
 <!--etc etc-->
</table>

Answer 1

首先选择“表”，然后对每个表应用您的函数:

Array.prototype.slice.call(document.querySelectorAll("table")).forEach(function (table) {
  var headertext = [];
  var headers    = table.querySelectorAll("th");
  var tablebody  = table.querySelector("tbody");
  var i, j, row, col;

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

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