Question

我只是尝试使用<ol>作为列表元素的表格，可以使用该表格插入新的表格行。

<table>
<thead>
    <tr>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
    </tr>
</thead>
<tbody>
  <ol id="list">
      <li><tr><td>row</td><td>row</td><td>row</td></tr></li>
  </ol>       
</tbody>

但是，我遇到的问题是该元素出现在我的表格之外。当我通过.append()动态添加内容时，不会删除某些元素的格式。

Jsfiddle example

我想使用此解决方案来计算＆＃34;容器列表中的当前位置＆＃34;。我得到了一个类似于下面例子的函数来计算我的列表，这些函数工作得很好，但插入到表中却无法正常工作。

countlists示例：Nested ordered lists

也许有可能在没有<ol>的表中实现计数语法？或者是否有<ol>等价物？

Answer 1

您需要阅读基本HTML：http://www.w3schools.com/html/html_tables.asp

以下是它的外观......

<table>
<thead>
    <tr>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
    </tr>
</thead>
<tbody id="list">
   <tr>
      <td>row</td><td>row</td><td>row</td><td>row</td>
   </tr>
   <tr>
      <td>row</td><td>row</td><td>row</td><td>row</td>
   </tr>
   <tr>
      <td>row</td><td>row</td><td>row</td><td>row</td>
   </tr>
</tbody>

Answer 2

理论上，你应该可以使用CSS计数器。

table {
  counter-reset: myTableCounter; 
}

thead th:first-child:before {
   display: table-cell;
  content: "";
}

tbody td:first-child:before {
  display: table-cell;
  counter-increment: myTableCounter;
  content: counter(myTableCounter);
}

但是，当我尝试这样做时，我找到了there were issues with display: table-cell generated content。

您可能需要查看adding additional elements to the table以在每行的第一个单元格内生成内容。

Answer 3

我的问题是：你想要实现什么目标？这是一个练习，只是为了看看你可以拉伸多少HTML？

对于你的jsfiddle，与点击相关联的操作会删除一些HTML标记（至少在我的浏览器上），从而导致<li>rowrowrow</li>，因此你最终会得到一个相当奇怪的格式化表格。我的渲染器通过单击作为行的内容来添加所有<li>个标记;如果你只有<li>标签，dom解析器可能会将它们包装成<ul>（它在我的标签上）。

恕我直言，您不需要使用ol来计算内容。你可以在jquery afaik中做到这一点。如果你坚持使用列表，那么你可能需要设置它们的样式并使用例如内部div（也称为样式）。通过列表和div模拟表是疯狂的imho：）

更新 - 用于分层表

我的想法是与this jsfiddle类似。我基本上在.sub和.main类中设置了样式。但是，如果需要添加一些额外的列，事情会变得复杂一些。在这种情况下，您需要类似treetable的内容。

在表元素之外的ol

3 个答案: