jquery - 在行之前但在表格之外添加元素？

Question

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

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

2)应该如何设计样式(CSS)？

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

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

Answer 1

为什么要在表的外部添加任何元素？只需使用隐藏单元格来包含您想要显示的图像/元素，并设置样式以响应父 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 ,