Question

I have a table (jqGrid) and I’d like to add a small icon/image before a row dynamically on document load. The image will be inserted based on one of the grid’s hidden column values (date); it is supposed to mark the importance/urgency of the row to the page/grid viewer. I’m well versed with jQuery and I have the logic down but the only thing I’m having trouble with is where in the DOM structure this element should be inserted because it shouldn’t be part of the actual grid. It should float just to the left of the row outside the grid. So basically, what I’m asking is this:

1) Where in the DOM structure should this element be inserted? The div container containing the actual table?;

2) How should it be styled (CSS)?

The only approach I’ve come up with is to get the y-coordinate of the row in question and insert it in the div container (that contains the table) set to that y-coordinate. I’m not sure if this is the best or right way to go about it.

EDIT: Lots of good approaches here. I’m thinking of combining the “afterInsertRow” event with David’s approach. Thank you all for your help!

Answer 1

Why add any elements to the outside of the table? Just use hidden cells to contain the image/element you want to show and style in response to the :hover of the parent tr, given the mark-up:

<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>

And the 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;
}

This approach seems to work (and should work in IE as well, I think): JS Fiddle demo,