Geek Answers Handbook

JQuery.html () splits tr / td tags?

http://jsfiddle.net/WXG7V/

As you can see below, I have a simple div containing a row that I would like to add to the end of my table. If I warn the contents of the div back to the screen using ".html ()", jQuery removes all the td / tr tags.

<html> <head> <title>jQuery Strips Table Tags</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready( function() { alert($("#newRow").html()); $(".tasks > tbody:last").append($("#newRow").html()); }); </script> </head> <body> <table class="tasks" style="margin-left: 0px;"> <tr> <th>Feeder ID</th> <th>From</th> <th>To</th> <th># Reels</th> <th>Reel Length</th> <th>Type</th> <th>Colour</th> </tr> </table> </div> <div id="newRow" style="display: none;"> <tr> <td><input type="text" name="feeder_id" id="feeder_id" /></td> <td><input type="text" name="from" id="from" /></td> <td><input type="text" name="to" id="to" /></td> <td><select name="number" id="number"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=6>6</option> <option value=8>8</option> <option value=9>9</option> <option value=12>12</option> <option value=14>14</option> <option value=16>16</option> </select></td> <td><input type="text" name="length" id="length" /></td> <td><select name="type" id="type"><option value="CU">Copper</option><option value="AL">Aluminum</option></select></td> <td><input type="radio" name="colour" id="black" value="black" />Black <input type="radio" name="colour" id="red" value="red" />Red <input type="radio" name="colour" id="blue" value="blue" />Blue <input type="radio" name="colour" id="white" value="white" />White <input type="radio" name="colour" id="green" value="green" />Green </td> </tr> </div>

+8
jquery html table
source share
2 answers

<tr> , <td> are valid elements inside the <table> . Use display: table-row and display: table-cell in combination with <div> to replace <tr> and <td> .

Example:

 <div class="table"> <div class="row"> <div class="cell"> Foo </div> </div> </div>

CSS

 .table{ display: table; } .row { display: table-row; } .cell { display: table-cell; }
+3
source share

If you use this for templates, I would recommend checking handlebars.js

Then you can simply wrap the existing html in the <script id="newRow" type="text/x-handlebars-template"> and save the rest of your markup in the same format you started in.

0
source share

More articles:


All Articles