javascript - 我怎样才能 "treefy"我的 table ？

标签 javascript jquery html tree

我有这个表，我想在其中创建树，我使用了一些库，但问题是它弄乱了表，所以我一直想知道是否有一个库不会更改表的设置，仅将表格“树形化”。

“愿原力与你同在”

我的 table enter image description here

例如，当我使用 JqTree 库时会发生什么 enter image description here 

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>

最佳答案

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

工作中JSFiddle .

我实际上对此感到非常自豪。 :)

关于javascript - 我怎样才能 "treefy"我的 table ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31478816/

上一篇：html - 每次我想使用它时都必须重写 html header 吗？

下一篇：java - 我可以在标记页面的不同父项下添加相同的 Wicket 组件吗

相关文章：

javascript - 带命名参数的构造函数？

javascript - 使用 Jquery 在文本框上启用 Click 事件

php - 如果 PHP 包含，则突出显示当前菜单项

javascript - jQuery 按数据值排除元素

javascript - 如何更改输入类型="file"元素的按钮文本

javascript - 如何从两次或三次嵌套的 ng-repeat 范围访问 Controller 的范围？

javascript - 是否可以像字符串一样操作/操作函数？

javascript - 有什么办法可以给子节点添加点击事件吗？

jquery - 我如何不将 jquery mobile 的 CSS 应用于特定元素？

javascript - 调试 ServiceStack POST 请求反序列化

©2024 IT工具网  联系我们