CODEWITHSUNDEEP
jquery
user592501
user592501

Reputation:

jQuery: How can I wrap an element with a table (consisting of multiple rows)?

The jQuery .wrap() function allows you to wrap any matched elements with some custom HTML. However, the function doesn't allow you to indicate where in the HTML you would like you matched element to be inserted -- it is always inserted into the inner most element.

I need to wrap a div with a fairly basic table (in order to add rounded corners to it), but the only catch is that the table has two rows and I want my element to appear in the second row. For example:

$("#my-div").wrap('<table> \
                        <tr> \
                            <td class="corner-topleft" colspan="2"></td> \
                            <td class="corner-topright"></td> \
                        </tr> \
                        <tr> \
                            <td class="corner-bottomleft"></td> \
                            <td class="DIV-SHOULD-APPEAR-HERE"></td> \
                            <td class="corder-bottomright"></td> \
                        </tr> \
                    </table>');

If you try to execute this script, the wrap() function automatically places the matched element inside the first table cell (i.e. "corner-topleft") as this is the "first inner most element".

How can I use jQuery to wrap my element with the multi-row table above?

Upvotes: 0

Views: 1346

Answers (1)

freakish
freakish

Reputation: 56477

You have to do this manually, like this:

var div = $('#my-div');
var table = $('<table> \
                        <tr> \
                            <td class="corner-topleft" colspan="2"></td> \
                            <td class="corner-topright"></td> \
                        </tr> \
                        <tr> \
                            <td class="corner-bottomleft"></td> \
                            <td class="DIV-SHOULD-APPEAR-HERE"></td> \
                            <td class="corder-bottomright"></td> \
                        </tr> \
                    </table>');
table.find('.DIV-SHOULD-APPEAR-HERE').append(div.clone());
// Have to clone the div, because of the possible 
// circular reference in next line.
div.replaceWith(table);

I didn't test it, but even if it doesn't work, then you should understand the idea.

Upvotes: 1

Related Questions