homepage Welcome to WebmasterWorld Guest from 54.198.148.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Adding Rows To Table with JQuery
Adding Rows To Table with JQuery
buck1107




msg:4380435
 10:18 pm on Oct 27, 2011 (gmt 0)

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);





 

buck1107




msg:4380695
 2:44 pm on Oct 28, 2011 (gmt 0)

As an add-on to my previous post, I had named the div "div1" so that it wouldn't be removed like the wrapper div is.
There is a 'replace' line that then turns the "div1" back to a "div," although in the process, "div1" loses its id attribute.

enigma1




msg:4383010
 12:17 pm on Nov 3, 2011 (gmt 0)

The replacewith will replace the html completely. So there will be no id tag. You could use:

var id = $('div1').attr('id');
$("div1").replaceWith($('<div id="'+id+'"/>').html($('div1').html()));

instead of the original replacewith to pass it over. The thing is you need to have different ids and not numeric values for valid html so you may want to use a name with an incremented index/id appended at the end.

buck1107




msg:4383681
 9:43 pm on Nov 4, 2011 (gmt 0)

Many thanks!
That did the job - here is my final code (below).



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="Javascript">
(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()
})
var id = $('div1').attr('id');
$("div1").replaceWith($('<div id="'+id+'"/>').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);




</script>

<style>

body
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
}
.rounded-corner
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 10px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
.rounded-corner thead th.rounded-company
{

}
.rounded-corner thead th.rounded-q4
{

}
.rounded-corner th
{
padding: 8px;
font-weight: normal;
font-size: 13px;
color: #039;
background: #b9c9fe;
}
.rounded-corner td
{
padding: 8px;
background: #e8edff;
border-top: 1px solid #fff;
color: #669;
}
.rounded
{
border-right: 1px solid #fff;
}
.rounded-corner tfoot td.rounded-foot-left
{

}
.rounded-corner tfoot td.rounded-foot-right
{



}
.rounded-corner tbody tr:hover td
{
background: #d0dafd;
}


</style>
8. Education<br/>
List all colleges and universities attended with dates of attendance, major, and degree earned.<br/>
(Add/remove row using buttons below)<br />
<br/>
<button type="button" id="addRowDemo3">Add a row</button>
<button type="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">College/University</th>
<th scope="col" class="rounded-q1">Dates Attended</th>
<th scope="col" class="rounded-q2">Major</th>
<th scope="col" class="rounded-q3">Degree</th>
<th scope="col" class="rounded-q3">Date Degree Received</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><textarea name="CollegeUniversity_Name" id="CollegeUniversity_Name"></textarea></td>
<td><textarea name="Dates_Attended" id="Dates_Attended"></textarea></td>
<td><textarea name="Major" id="Major"></textarea></td>
<td><textarea name="Degree" id="Degree"></textarea></td>
<td><textarea name="Date_Degree_Received" id="Date_Degree_Received"></textarea></td>
</tr>
</tbody>
</table>






<p>&nbsp; </p>
<script language="Javascript">
var rowIncrement=0
$(document).ready(function () {
$("#addRowDemo3").click(function () {
rowIncrement=rowIncrement + 1
id=rowIncrement
$("#Demo3").addRow({
newRow: "<tr><td><textarea name='CollegeUniversity_Name"+id+"' id='CollegeUniversity_Name"+id+"'></textarea></td><td><textarea name='Dates_Attended"+id+"' id='Dates_Attended"+id+"'></textarea></td><td><textarea name='Major"+id+"' id='Major"+id+"'></textarea></td><td><textarea name='Degree"+id+"' id='Degree"+id+"'></textarea></td><td><textarea name='Date_Degree_Received"+id+"' id='Date_Degree_Received"+id+"'></textarea></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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved