Search jQuery

jQuery Forum

Dynamically Adding Rows To Table with JQuery (and preserving Div attributes)

in Using jQuery • 11 years ago

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 originally came from here (http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx) but no response has been available from there. 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></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"> </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);

Response title

Attachments

jQuery Forum

Dynamically Adding Rows To Table with JQuery (and preserving Div attributes)

Statistics

Tags

Actions