我怎样才能“树”我的桌子？答案

【问题标题】：How can I "treefy" my table?我怎样才能“树”我的桌子？
【发布时间】：2015-07-17 15:00:40
【问题描述】：

我有这张桌子我想在里面创建树，我使用了一些库，但问题是它把桌子弄乱了，所以我一直想知道是否有一个库不会改变桌子的设置，只“树化”表。

“愿原力与你同在”

我的桌子

当我使用 JqTree 库时会发生什么，例如，

function removeClassName(elem, className) {
  elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass(elem, className) {
  removeClassName(elem, className);
  elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/, "");
};

function stripedTable() {
  if (document.getElementById && document.getElementsByTagName) {
    var allTables = document.getElementsByTagName('table');
    if (!allTables) {
      return;
    }

    for (var i = 0; i < allTables.length; i++) {
      if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
        var trs = allTables[i].getElementsByTagName("tr");
        for (var j = 0; j < trs.length; j++) {
          removeClassName(trs[j], 'alternateRow');
          addCSSClass(trs[j], 'normalRow');
        }
        for (var k = 0; k < trs.length; k += 2) {
          removeClassName(trs[k], 'normalRow');
          addCSSClass(trs[k], 'alternateRow');
        }
      }
    }
  }
}

function calcTh() {

  var table = document.getElementsByTagName(table);
  for (var i = 0; i < table.length; i++) {
    table[i].width = (100 / table.length) + "%";
  }
}

function calc() {
  var table = document.getElementById("Stable");
  var w = table.offsetWidth; //total width of the table

  for (var y = 0; y < table.rows.length; y++) { // cycle through rows
    var row = table.rows[y];
    for (var x = 0; x < row.cells.length; x++) { // cycle through cells
      var cell = row.cells[x];
      cell.style.width = (w / row.cells.length) + "px"; // add 'px' for a unit
    }
  }
}

window.onload = function() {
  stripedTable();
  calc();
};
window.onresize = function() {
  stripedTable();
  calcTh();
  calc();
};

th,
td {
  word-break: break-all;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: #FFF;
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10px;
  padding: 0;
}
table,
td,
a {
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
  font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}
div.tableContainer {
  clear: both;
  border: 1px solid #963;
  padding-right: 1px;
  height: 285px;
  overflow: auto;
  width: 100%;
}
html>body div.tableContainer {
  overflow: hidden;
  width: 100%;
  height: 83%;
}
div.tableContainer table {
  float: left;
  width: 100%;
  height: 100%;
}
html>body div.tableContainer table {
  width: calc(100% - 16px);
  height: 100%;
}
thead.fixedHeader tr {
  position: relative
}
html>body thead.fixedHeader tr {
  display: block
}
thead.fixedHeader th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left;
}
thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
  color: #FFF;
  display: block;
  text-decoration: none;
  width: 100%;
}
thead.fixedHeader a:hover {
  color: #FFF;
  display: block;
  text-decoration: underline;
  width: 100%;
}
html>body tbody.scrollContent {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100%;
}
/* make TD elements pretty. Provide alternating classes for striping the table */

/* http://www.alistapart.com/articles/zebratables/                             */

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
.scrollTable,
.scrollContent {
  overflow: visible;
}
html>body tbody.scrollContent {
  width: calc(100% + 17px);
}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Pure CSS Scrollable Table with Fixed Header</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="language" content="en-us">

  <style type="text/css"></style>
</head>

<body>

  <h1>Pure CSS Scrollable Table with Fixed Header</h1>


  <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" id="Stable">
      <thead class="fixedHeader">
        <tr class="alternateRow">
          <th><a href="#">Header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3UHAUHAUHAUHAUHAUHAUHAUHAUHAUHAUHAUHAUHAUHUHAUHAUHAUHAUHAHUAUHAHAHUAUH</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div>
    <br>
  </div>



</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span>

</html>

【问题讨论】：

您只需要一级扩展吗？还是您希望能够扩展孩子？
我也想有可扩展的孩子:)

标签： javascript jquery html tree

【解决方案1】：

我想出的解决方案是使用style.display="none" 隐藏子行，然后当单击父行时，它会展开所有子行。这可扩展到多个子级，因为每一行在其属性data-rowIndex 中都有其树级别。你可以通过给它类hasChildren来识别一行有孩子。

工作JSFiddle。

我真的为此感到非常自豪。 :)

【讨论】：

抱歉“然后”，“等等至少 6 个字符”，顺便说一句，工作很棒 :)