1

Всем Добрый вечер! Прошу помощи с вёрсткой. Хочу сделать древовидную таблицу, (данные могут меняться) но у меня постоянно слезает стиль в право. Имею такой вариант https://jsfiddle.net/nafanya123/L9txe6bq/

<body>
    <button onclick="SwapAll(false);">Свернуть всё</button> &#160; <button onclick="SwapAll(true);">Развернуть всё</button>
<br><br>
<table id="MyTable">
    <tr>
        <th>Name</th> 
        <th>sum1</th>
        <th>sum2</th> 
        <th>sum3</th>
    </tr>
    <tr> 
        <td> 
            <label>
                <input type="checkbox">
                    <a onclick="sh(this)">Item1</a>
            </label> 
        </td> 
        <td>313</td> 
        <td>5</td> 
        <td>318</td>
    </tr>
    <tr>
        <td colspan=5 class="node">
            <input type="checkbox">
            <table>
                <tr> 
                    <td>
                        <label>
                            <input type="checkbox">
                                <a onclick="sh(this)">Item2</a>
                        </label>
                    </td> 
                    <td>313</td> 
                    <td>5</td> 
                    <td>318</td> 
                </tr>
            </table>
            <table>
                <tr> 
                    <td>
                        <label>
                            <input type="checkbox">
                                <a onclick="sh(this)">Item3</a>
                        </label>
                    </td> 
                    <td>313</td> 
                    <td>5</td> 
                    <td>318</td> 
                </tr>
                <tr>
                    <td colspan=5 class="node">
                        <input type="checkbox">
                        <table>
                            <tr>
                                <td>
                                <label>
                                    <input type="checkbox">
                                        <a onclick="sh(this)">Item4</a>
                                    </label>
                                </td> 
                                <td></td> 
                                <td></td> 
                                <td>10</td>
                            </tr>
                            <tr>
                                <td colspan=5 class="node">
                                    <input type="checkbox">
                                    <table>
                                        <tr>
                                            <td>
                                            <label>
                                                <input type="checkbox">
                                                    <a onclick="sh(this)">Item5</a>
                                                </label>
                                            </td> 
                                            <td></td> 
                                            <td></td> 
                                            <td>10</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
        <tr> 
        <td> 
            test
        </td> 
        <td>313</td> 
        <td>5</td> 
        <td>318</td>
    </tr>
</table>
table {
    border-collapse:collapse;
    table-layout:fixed;
    width:800px;
}
td, th {
    border:1px solid gray;
    border-top:0;
    padding:2px 5px;
    width:300px;
}
th {
    background:#ccc;
    border-top:1px solid gray;
}
input{
    display:none;
}
input + a {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
    no-repeat 0px 4px;
}
input:checked + a {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
    no-repeat 0px 4px;
}
label a {
    cursor:pointer;
    padding-left:16px;
}
input ~ table {
    display:none;
}
input:checked ~ table {
    display:table;
    margin-top:-1px;
    margin-left:-1px;
}
input:checked ~ table{
    margin-left: 15px;
}
.node {
    padding:0;
    border-bottom:0;
}
td+td+td+td {
    text-align:right;
}
function sh(el) {
    var row = el.parentNode.parentNode.parentNode;
    var nextRow = row.parentNode.rows[row.rowIndex + 1];
    var chk = nextRow.querySelector('td > input');
    chk.checked = !chk.checked;
}

function SwapAll(b) {
    var tbl = document.getElementById('MyTable');
    var chks = tbl.getElementsByTagName('input');
    for (var i=0; i<chks.length; i++) {
        chks[i].checked = b;
    }
}

Хочу добиться такого варианта: введите сюда описание изображения

2 ответа 2

4

На мой взгляд лучше разместить все уровни вложенности на одном уровне dom-дерева. Это обеспечит стабильное поведение ячеек таблицы даже без задания им ширины

[].forEach.call(document.querySelectorAll('.toggler input'), function(input) {
  input.addEventListener('change', function() {

    var row = input.closest('tr');

    if (input.checked) {
      showChildRows(row);
    } else {
      hideChildRows(row);
    }
  })
});

//получить дочерние ряды всех уровней вложенности
function getChildRows(row) {
  var childRows = [],
    currentRow = row,
    startLevel = +row.getAttribute('data-level');

  while (currentRow && currentRow.nextElementSibling && +currentRow.nextElementSibling.getAttribute('data-level') > startLevel) {
    childRows.push(currentRow.nextElementSibling);
    currentRow = currentRow.nextElementSibling;
  }
  return childRows;
}

//скрыть все дочерние ряды
function hideChildRows(row) {
  var childRows = getChildRows(row);
  childRows.forEach(function(childRow) {
    childRow.classList.remove('dropdown--visible')
  })
}

//показать дочерние ряды в зависимости от состояния чекбокса
function showChildRows(row) {
  var childRows = getChildRows(row), //все дочерние ряды
    level = +row.getAttribute('data-level'),
    toggler = row.querySelector('.toggler input'),
    immediateChildren = childRows.filter(function(tr) {
      return tr.getAttribute('data-level') == level + 1
    }); //непосредственно дочерние ряды

  if (toggler && toggler.checked) { //если ряд раскрыт, показываем непосредственно дочерние ряды и повторяем для них такую же процедуру

    immediateChildren.forEach(function(childRow) {
      childRow.classList.add('dropdown--visible')
      showChildRows(childRow); //типа рекурсия
    })
  }
}

//кнопки
document.getElementById('slideUp').addEventListener('click', function() {
  [].forEach.call(document.querySelectorAll('.toggler input'), function(input) {
    input.checked = false
  });
  [].forEach.call(document.querySelectorAll('.dropdown--visible'), function(row) {
    row.classList.remove('dropdown--visible')
  });
})
document.getElementById('slideDown').addEventListener('click', function() {
  [].forEach.call(document.querySelectorAll('.toggler input'), function(input) {
    input.checked = true
  });
  [].forEach.call(document.querySelectorAll('.dropdown'), function(row) {
    row.classList.add('dropdown--visible')
  });
})
table {
  border-collapse: collapse;
  width: 800px;
  max-width: 100%;
}

td,
th {
  border: 1px solid gray;
  border-top: 0;
  padding: 2px 5px;
  width: 300px;
}

th {
  background: #ccc;
  border-top: 1px solid gray;
}

tbody td:last-child {
  text-align: right;
}

.toggler {
  display: inline-block;
  user-select: none;
  cursor: pointer;
}

.toggler input {
  margin: 0 .75em 0 0;
  appearance: none;
  -webkit-apppearance: none;
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC) no-repeat center/contain;
}

.toggler input:checked {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=);
}

.dropdown {
  display: none;
}

.dropdown--visible {
  display: table-row;
}

.dropdown td:first-child {
  padding-left: calc(5px + 15px * var(--level));
}
<button id="slideUp">Свернуть всё</button> &#160; <button id="slideDown">Развернуть всё</button>
<br><br>
<table id="MyTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>sum1</th>
      <th>sum2</th>
      <th>sum3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label class="toggler"><input type="checkbox"><span>Item1</span></label>
      </td>
      <td>313</td>
      <td>5</td>
      <td>318</td>
    </tr>
    <tr class="dropdown" style="--level: 1" data-level="1">
      <td>
        <label class="toggler"><input type="checkbox"><span>Item2</span></label>
      </td>
      <td>313</td>
      <td>5</td>
      <td>318</td>
    </tr>
    <tr class="dropdown" style="--level: 1" data-level="1">
      <td>
        <label class="toggler"><input type="checkbox"><span>Item3</span></label>
      </td>
      <td>313</td>
      <td>5</td>
      <td>318</td>
    </tr>
    <tr class="dropdown" style="--level: 2" data-level="2">
      <td>
        <label class="toggler"><input type="checkbox"><span>Item4</span></label>
      </td>
      <td></td>
      <td></td>
      <td>10</td>
    </tr>
    <tr class="dropdown" style="--level: 3" data-level="3">
      <td>
        <label class="toggler"><input type="checkbox"><span>Item5</span></label>
      </td>
      <td></td>
      <td></td>
      <td>10</td>
    </tr>
    <tr>
      <td>test</td>
      <td>313</td>
      <td>5</td>
      <td>318</td>
    </tr>
  </tbody>
</table>

2

Соглашусь с @zhurof, лучше разместить все уровни на одном уровне DOM. Но мне кажется, что реализация слишком сложная. Вот мой вариант, как альтернативный

const table = document.querySelector('table');

const setLevel = (tr, level) => {
  tr.style.setProperty('--padding-left', `${level * 15 + 5}px`);
  [...table.querySelectorAll(`tr[data-parent='${tr.querySelector('span').innerText}']`)].forEach((tr) => setLevel(tr, level + 1));
};

const toggleState = (tr, expanded, visible, main = false) => {
  if (main) {
    tr.classList.toggle('expanded');
    visible = tr.classList.contains('expanded');
  }
  expanded = tr.classList.contains('expanded');
  [...table.querySelectorAll(`tr[data-parent='${tr.querySelector('span').innerText}']`)].forEach((row) => {
    visible && expanded ? row.classList.add('visible') : row.classList.remove('visible');
    toggleState(row, expanded, visible);
  });

};

[...table.querySelectorAll('.row:not([data-parent])')].forEach((tr) => setLevel(tr, 0));
[...table.querySelectorAll('button')].forEach((button) => button.addEventListener('click', (event) => toggleState(event.target.closest('tr'), undefined, undefined, true)));
table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

td,
th {
  border: 1px solid gray;
  padding: 5px;
  min-width: 100px;
}

th {
  background: #ccc;
}

tr[data-parent] {
  display: none;
}

.row[data-parent].visible {
  display: table-row;
}

.row td:first-child {
  padding-left: var(--padding-left);
}

.row button {
  width: 13px;
  height: 13px;
  line-height: 0;
  outline: none;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC) no-repeat;
}

.row.expanded button {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=) no-repeat
}
<table>
  <tr>
    <th>Name</th>
    <th>sum1</th>
    <th>sum2</th>
    <th>sum3</th>
  </tr>
  <tr class="row">
    <td>
      <button>&nbsp;</button>
      <span>Item1</span>
    </td>
    <td>313</td>
    <td>5</td>
    <td>318</td>
  </tr>
  <tr class="row" data-parent="Item1">
    <td>
      <button>&nbsp;</button>
      <span>Item2</span>
    </td>
    <td>313</td>
    <td>5</td>
    <td>318</td>
  </tr>
  <tr class="row" data-parent="Item2">
    <td>
      <button>&nbsp;</button>
      <span>Item3</span>
    </td>
    <td>313</td>
    <td>5</td>
    <td>318</td>
  </tr>
  <tr class="row" data-parent="Item2">
    <td>
      <button>&nbsp;</button>
      <span>Item4</span>
    </td>
    <td>313</td>
    <td>5</td>
    <td>318</td>
  </tr>
  <tr class="row">
    <td>
      <button>&nbsp;</button>
      <span>Item5</span>
    </td>
    <td>313</td>
    <td>5</td>
    <td>318</td>
  </tr>
</table>

2
  • Спасибо вам большое! Commented 18 сент. 2021 в 17:47
  • @Connect1507 , чтобы поблагодарить автора ответа, проголосуйте за ответ или отметьте его как решение.
    – zhurof
    Commented 19 сент. 2021 в 10:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.