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


The jQuery function allows you to wrap any matched elements with some custom HTML. However, the function does not allow you to indicate where from the HTML element you want to match - it is always inserted into the internal most element < / P>

I have to wrap a device with a very basic table (in order to add round corners), but the only grip is that there are two rows in the table and I want my element The Surrey line will appear in part. For example:

  $ ("# my-div"). Wrap ('& lt; Table & gt; \ & lt; tr & gt; \ & lt; td class = "corner-toplate" colspan = "2" & gt;  & lt; Td square = "corner-top" & gt; & lt; / td> & lt; / tr & gt; \ & lt; tr & gt; \ & lt; td square = "corner-bottom-left" & Gt; & lt; / td & gt; \ & lt; td class = "DIV- should-appear-HERE" & gt; & lt; / td & gt; \ & lt; td class = "cedar-talcur" & Gt; & lt; / td & gt; \ & lt; / tr & gt; \ & lt; / table & gt; ';);   

If you try to execute this script, then the rap () function will automatically be sent to first table cell (i.e. "corner-toplate") It gives the position of matching element in the form, it is the "first inmost element".

How can I use jQuery to wrap my element with the given multi-line table?

You have to do this manually, such as:

  Var div = $ ('#my-div'); Var table = $ ('& lt; Table & gt; \ & lt; tr & gt; \ & lt; td class = "corner-toplate" colspan = "2" & gt; & lt; / td & gt; & Lt; td class = "corner-top">     tr & gt; \ & lt; td square = "corner-down -left "& gt; & lt; / td & gt; \ & lt; td class =" Div-shawl-aper-heare "& gt;  & lt; td class =" cedar -tratar ">  \   

I did not test it, but even if this does not work, then you should understand this idea.

Comments