在行之前但在表格之外添加元素？答案

【问题标题】：Adding an element before a row but outside the table?在行之前但在表格之外添加元素？
【发布时间】：2012-10-22 17:14:52
【问题描述】：

我有一个表格 (jqGrid)，我想在文档加载时动态地在一行之前添加一个小图标/图像。图像将根据网格的隐藏列值之一（日期）插入；它应该将行的重要性/紧迫性标记到页面/网格查看器。我精通 jQuery，我的逻辑很混乱，但我唯一遇到的问题是应该在 DOM 结构中的哪个位置插入这个元素，因为它不应该是实际网格的一部分。它应该浮动在网格外行的左侧。所以基本上，我要问的是：

1) 该元素应该插入到 DOM 结构的什么位置？包含实际表格的 div 容器？;

2) 应该如何设置样式（CSS）？

我想出的唯一方法是获取相关行的 y 坐标并将其插入设置为该 y 坐标的 div 容器（包含表格）中。我不确定这是否是最好或正确的方法。

编辑：这里有很多好方法。我正在考虑将“afterInsertRow”事件与 David 的方法结合起来。谢谢大家的帮助！

【问题讨论】：

听起来应该有一列包含您的图标，用于表示“状态”或“重要性”（或者您想标记它）。不管有没有图标，它仍然是表格数据集的一部分。如果图标必须显示在表格之外，CSS 可以通过更改td 的显示类型并通过绝对定位移动它来将其放置在那里。

标签： jquery html css dom jqgrid

【解决方案1】：

为什么要在table 之外添加任何元素？只需使用隐藏单元格来包含您想要显示和样式的图像/元素，以响应父级tr 的:hover，给定标记：

<table>
    <thead>
        <tr>
            <th></th>
            <th>Column 'one'</th>
            <th>Column 'two'</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>row one</td>
            <td>row one</td>
        </tr>
        <tr>
            <td></td>
            <td>row two</td>
            <td>row two</td>
        </tr>
    </tbody>
</table>

还有 CSS：

tr th:first-child,
tr td:first-child {
    visibility: hidden;
    border: 0 none transparent; /* hide the borders */
    width: 1em; /* define the width, to avoid the visible content */
}               /* causing page-jumps */

tr th:first-child + th,
tr td:first-child + td {
    border-left: 2px solid #000; /* style the cell *after* the first-child */
}                                /* with a border to 'fake' the look of the */
                                 /* new content being appended outside */
td, th {
    visibility: visible;
    border: 1px solid #000;      /* show borders to continue the illusion */
    height: 2em;                 /* or whatever... */
    line-height: 2em;
}

这种方法似乎可以工作（我认为应该也可以在 IE 中工作）：JS Fiddle demo,

【讨论】：

我喜欢它。虽然当我将第一列的显示从隐藏更改为可见时，它似乎将行向右移动（即通知/图标出现在 jqGrid 的第一列而不是表格的左侧）

【解决方案2】：

最简单的解决方案是使用 jQuery 的“my at of”定位：

1) 将元素附加到页面主体。

2) 使用 jQuery “my at of”定位将元素放置在您尝试标记为紧急的行元素旁边。 http://docs.jquery.com/UI/API/1.8/Position

【讨论】：

【解决方案3】：

您可以使用 jqGrid 中的 afterInsertRow 事件：

var my_jqGrid = $('#id_table').jqGrid({
   ... //Other configs

   afterInsertRow: function(rowid, rowdata, rowelement){

       console.log(rowdata);
       //Here you code condition to insert in other div
       if(rowdata['key']=='status_ok'){
           $('#div_id').append( '<img src="image/ok.png" />'  );
       }          
   }

});

查看维基here

我附加一个简单的图像，您可以附加一个 div 容器图像并使用 css 设置高度。

【讨论】：