Question

我有一张如下表格。并且有一个div container信息（通常是大文本），所以我想定位这些div straight under each tr row以使它们可以切换（如滑动面板）。你能告诉我如何使用CSS / Javascript定位它吗？虽然，这个html是not semantic所以如果有另一种方法没有div inside tr（我不能删除代码中的表，但可能是一些dd / dt？） - 它将是太棒了！

<table width="100%" id="datatable" class="table-sortable">
    <thead>
     <tr>
      <th id="th_name">Name</th>
      <th id="th_email" class="table-th-sort ">E-mail</th>
      <th id="th_birthday">Birthday</th>
     </tr>
    </thead>

    <tbody>

    <tr class="table-tr-group-head">
      <td class="someclass">Name1</td>
      <td class="table-td-sort">abc@abcd.com</td>
      <td class="someclass">01.01.1981</td>
      <div class="info">Large text1</div> <!-- this one -->
    </tr>

    <tr class="table-tr-group-head">
      <td class="someclass">Name2</td>
      <td class="table-td-sort">def@abcd.com</td>
      <td class="someclass">02.02.1982</td>
      <div class="info">Large text2</div>  <!-- this one -->
    </tr>

    <tr class="table-tr-group-head">
      <td class="someclass">Name3</td>
      <td class="table-td-sort">ghi@abcd.com</td>
      <td class="someclass">03.03.1983</td>
      <div class="info">Large text3</div>  <!-- this one -->
    </tr>

</tbody></table>

P.S我不能在每个像<tr><td> </td><td><div class="info">Large text</div></td><td> </td></tr>之后注入另一个tr行，因为这个表是由Javascript生成的，不知怎的，当我创建它时，有一个数据移位。

Answer 1

Moo，我在我的应用程序上与这个人争吵了很长时间......真的没有简单的解决方案。数据表无法处理colspans，这限制了您注意到添加行的能力。除非你想以老式的方式对div进行一些创造性的跨越，否则添加一行基本上就不行了。由于Datatables对表语法有如此严格的控制，因此在理论上可以通过CSS进行某种转换，但是非常困难......但是我怀疑如果你走这条路，你会在javascript里面做大量的jumble html插入。

在敲了敲我的脑袋一段时间之后，我选择了Qtip（http://craigsworks.com/projects/qtip/）我在通过上下文和css触发的行下面有一个提示弹出，这给出了表格移动的准幻觉。有一段时间我考虑过倾销Datatables，但我发现我们的客户非常欣赏它提供的功能，而其他人甚至都没有接近。作为一个额外的好处，它非常容易设置，并且非常可定制。
祝你好运。

带有滑动信息的数据网格表 - div内部的tr定位

1 个答案: