Adding Rows To Table with JQuery

Hi,
I've been working to modify the following code to be able to include a div within a td, so that another div can be added later, within that div. The code immediately below shows how I would like the table rows to look:

<tr>
<td></td>
<td>
<div id="container">*more divs could be dynamically added within this container div
</div>
<td></td>
</tr>

Below is the code which I've come up with, but it doesn't preserve the id of the container div. Any help is greatly appreciated! Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Add new table rows with jQuery</title> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 <script src="Scripts/jquery.AniRows.js" type="text/javascript"></script>
 <link href="Styles/style.css" rel="stylesheet" type="text/css" />

</head> 
<body> 



<button id="addRowDemo3">Add a row</button> 
 <button id="removeRowDemo3">Remove a row</button> 
<table id="Demo3" class="rounded-corner" summary="Anirows Demo 1">
 <thead>
 <tr>
 <th scope="col" class="rounded-company">Company</th>
 <th scope="col" class="rounded-q1">Q1</th>
 <th scope="col" class="rounded-q2">Q2</th>
 <th scope="col" class="rounded-q3">Q3</th>
 <th scope="col" class="rounded-q4">Q4</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td colspan="4" class="rounded-foot-left" style="border-right: 0px solid #fff;"><em>This is the footer, notice the plugin skips over it.</em></td>
 <td class="rounded-foot-right">&nbsp;</td>
 </tr>
 </tfoot>
 <tbody>

 <tr id = "newRow">
 <td>MegaSoft</td>
 <td>20.4</td>
 <td>15.6</td>
 <td>22.3</td>
 <td>29.3</td>
 </tr>
 </tbody>
</table>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
</form>



 <script type="text/javascript">

 $(document).ready(function () {
 
 $("#addRowDemo3").click(function () {
var id;
id = document.getElementById("id").value;
 $("#Demo3").addRow({
 newRow: "<tr><td><input type=\"button\" value=\"button\" /></td><td><textarea></textarea><input type=\"text\" /><div1 id='"+id+"'>test</div></td><td><input type=\"text\" /></td><td><img src=\"styles/table-images/check.gif\" /></td><td><input type=\"checkbox\" /></td></tr> ",
 addTop: false,
 removeTop: false
 });
 $('#Demo3 tr td:not(:last-child)').addClass("rounded");
 });
 $("#removeRowDemo3").click(function () {
 $("#Demo3").removeRow({});
 });

 $('#Demo1 tr td:not(:last-child)').addClass("rounded");
 $('#Demo2 tr td:not(:last-child)').addClass("rounded");
 $('#Demo3 tr td:not(:last-child)').addClass("rounded");
 });




 
 </script>
</body> 
</html>

And here is the AniRows.js:


(function ($) {
 var defaults = {
 rowSpeed: 300,
 newRow: null,
 addTop: true,
 removeTop: true
 };
 var newClasses = "newRow"
 var options = $.extend(defaults, options);
 $.fn.addRow = function (options) {
 opts = $.extend(defaults, options);
 var $table = $(this);
 var $tableBody = $("tbody", $table);
 var t = $(opts.newRow).find("td").wrapInner("<div style='display:none;'/>").parent()
 if (opts.addTop) t.appendTo($tableBody);
 else t.prependTo($tableBody);
t.attr("class", newClasses).removeAttr("id").show().find("td div").slideDown(options.rowSpeed, function (){
 $(this).each(function () {
 var $set = jQuery(this);
 $set.replaceWith($set.contents());
 }).end()
 })

$("div1").replaceWith($('<div/>').html($('div1').html()));




 return false;
 };
 $.fn.removeRow = function (options) {
 opts = $.extend(defaults, options);
 var $table = $(this);
 var t
 if (opts.removeTop) t = $table.find('tbody tr:last')
 else t = $table.find('tbody tr:first');
 t.find("td")
 .wrapInner("<div style='DISPLAY: block'/>")
 .parent().find("td div")
 .slideUp(opts.rowSpeed, function () {
 $(this).parent().parent().remove();
 });
 return false;
 };
 return this;
})(jQuery);

Adding Rows To Table with JQuery

Adding Rows To Table with JQuery

buck1107

buck1107

enigma1

buck1107

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week