CODEWITHSUNDEEP
jqueryhtmlappend
David
David

Reputation: 3323

Can jquery add closing element tags (markup) only?

Given this nth row in a table, can jquery add only the markup to close the table

        <tr class="eop">
            <td> 8/31 </td>
            <td> XYZ </td>
            <td> 2 </td>
            <td> 92.00 </td>
        </tr>

   </tbody>            --
</table>                 |
<table>                  --     //  inserted markup
   head jquery var       |
   <tbody>             --

What I'm trying is to use:

$('tr.eop').append("</tbody></table><table>+head+<tbody>");   // head = table header

Upvotes: 0

Views: 2743

Answers (3)

Kevin B
Kevin B

Reputation: 95047

The DOM consists of element nodes, the opening and closing tags mean nothing once an element is part of the DOM or a DOM Fragment.

You cannot attach elements to the page that do not have a closing tag. If the closing tag is omitted, one will be created for you. You also cannot close a parent element by appending a closing tag as a child, it will instead simply create a new complete element inside the parent element.

If you want to create a new table, create a new table.

var newTable = $("<table><thead>"+head+"</thead><tbody></tbody></table>");
$('tr.eop').closest("table").after(newTable)
$('tr.eop').nextAll().appendTo(newTable.find("tbody"));

Upvotes: 3

Jorge Luis Vargas
Jorge Luis Vargas

Reputation: 174

If not a good practice, however it works (I'm not sure if it can fail at some point), take a look to this example:

http://jsfiddle.net/MKSqy/

However I'm not sure what you're trying to accomplish, you can easily do something similar by manipulating the DOM tree. Or changing the way you are building the app, instead of using tables use divs and create a hidden or that is shown when you want.

<div class="table">
    <div class="row">
        <div>8/31</div>
        <div> XYZ </div>
        <div> 2 </div>
        <div> 92.00 </div>
    </div>
    <div class="head" style="visible:none;"></div>
</div>

and manipulate the css to create a table style. I recommend this just for just case, however table tag exist for a reason and you shouldnt abuse of divs.

EDIT: I didnt understand very well so this is what you need

http://jsfiddle.net/MKSqy/1/

What this does is basically select the next elements after the nth element and create a table and append it right next to the preovious table. So you dont have to handle the close tags.

Upvotes: 0

nicholasnet
nicholasnet

Reputation: 2277

Please try this. See if it works.

var tt = $('tr.eop');
tt.innerHTML = tt.innerHTML + '</tbody></table><table>'+head+'<tbody>';

Upvotes: 0

Related Questions