Сворачивание таблиц внутри таблиц

#javascript #html #dom #html-table

#javascript #HTML #dom #html-таблица

Вопрос:

Я пытаюсь свернуть таблицу, когда происходит событие onclick. Я перебираю строки таблицы и либо устанавливаю их видимость на свернутую, либо на видимую. Если в одном из элементов данных таблицы есть таблица, установка для видимости строки значения visible не влияет на видимость таблицы внутри. Я попытался сделать центральный цикл рекурсивным и вызвать его на любых внутренних узлах таблицы, но это ничего не исправляет. Как я могу исправить эту проблему?

main.html

 <html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <table class="collapsible" cellpadding="2" cellspacing="0" border="2" bgcolor="lightgrey">
            <tr>
                <td style="word-wrap: break-word;">datum 1</td>
                <td style="word-wrap: break-word;">datum 2</td>
            </tr>
            <tr>
                <td>
                <table CELLPADDING="2" CELLSPACING="0" BORDER="2" BGCOLOR="lightgrey">
                        <tr>
                            <td style="word-wrap: break-word;">datum 3</td>
                        </tr>
                        <tr>
                            <td style="word-wrap: break-word;">datum 4</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="word-wrap: break-word;">datum 5</td>
                <td style="word-wrap: break-word;">datum 6</td>
            </tr>
        </table>
        <script>
        var tbls = document.getElementsByClassName("collapsible");
        var tblCnt = tbls.length;
        init();

        function init() {
            var i;
            for (i=0; i<tblCnt; i  ) {
                tbls[i].addEventListener("click", collapse);
            }
        }
        function collapse() { 
            collapseAlg(this,1)
        }
        // start=0 -> collapse all rows, start=1 -> collapse all except the first row (assume no th)
        function collapseAlg(tbl, start) {
            console.log("called", tbl);
            var rows = tbl.getElementsByTagName("tr");
            var i;
            var j;
            var datum;
            for (i = start; i < rows.length; i  ) {
                if (window.getComputedStyle(rows[i]).visibility === "collapse") {
                    rows[i].style.visibility = "visible";
                    tblss = rows[i].getElementsByTagName("table");
                    for (j=0; j < tblss.length; j  ) {
                        collapseAlg(tblss[j],0);
                    } 
                } else {
                    rows[i].style.visibility = "collapse";
                }
            }
        }
        </script>
    </body>
</html>

1. «установка видимости строки на видимую не влияет на видимость таблицы внутри» — почему это должно быть?

2. Это было просто наблюдение за поведением кода. Я хочу развернуть все вложенные таблицы. Это причина, почему?

Ответ №1:

Отличный вопрос. Проблема в этом коде:

 var rows = tbl.getElementsByTagName("tr");

Это извлекает все элементы TR таблицы, включая те, которые находятся внутри вложенных таблиц.

Вам нужны только строки .collapsible таблицы. Это немного сложно, потому что таблицы автоматически добавляют элементы TBODY, если вы не сделали этого явно.

Это дает нужные вам строки:

 var rows = tbl.querySelectorAll(":scope > tbody > tr");

И вы можете избавиться от этого кода:

 tblss = rows[i].getElementsByTagName("table");
for (j=0; j < tblss.length; j  ) {
  collapseAlg(tblss[j],0);
}

Фрагмент:

Показать фрагмент кода

 var tbls = document.getElementsByClassName("collapsible");
var tblCnt = tbls.length;
init();

function init() {
  var i;
  for (i = 0; i < tblCnt; i  ) {
    tbls[i].addEventListener("click", collapse);
  }
}

function collapse() {
  collapseAlg(this, 1)
}
// start=0 -> collapse all rows, start=1 -> collapse all except the first row (assume no th)
function collapseAlg(tbl, start) {
  console.log("called", tbl);
  var rows = tbl.querySelectorAll(":scope > tbody > tr");
 
  var i;
  var j;
  var datum;
  for (i = start; i < rows.length; i  ) {
    if (window.getComputedStyle(rows[i]).visibility === "collapse") {
      rows[i].style.visibility = "visible";
    } else {
      rows[i].style.visibility = "collapse";
    }
  }
}

 <table class="collapsible" cellpadding="2" cellspacing="0" border="2" bgcolor="lightgrey">
  <tr>
    <td style="word-wrap: break-word;">datum 1</td>
    <td style="word-wrap: break-word;">datum 2</td>
  </tr>
  <tr>
    <td>
      <table CELLPADDING="2" CELLSPACING="0" BORDER="2" BGCOLOR="lightgrey">
        <tr>
          <td style="word-wrap: break-word;">datum 3</td>
        </tr>
        <tr>
          <td style="word-wrap: break-word;">datum 4</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="word-wrap: break-word;">datum 5</td>
    <td style="word-wrap: break-word;">datum 6</td>
  </tr>
</table>