Trying to learn jquery

Question

newbie14 0 Posting Pro

13 Years Ago

Dear All,
Below I have a code which when press the add button will keep adding the row. I would like to learn further about jquery. Why must we always include jquery-1.5.1.min.js is that the functionality is it? Next why must we call table.dynatable is the dynatable is the id but I notice it is just the class name right? I would like to know further what exactly this codes do prot.attr("class", ""),prot.find(".id").attr("value", id); and master.find("tbody").append(prot);. Thank you.

<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script>
		$(document).ready(function() {
			var id = 0;
			
			// Add button functionality
			$("table.dynatable button.add").click(function() {
				id++;
				var master = $(this).parents("table.dynatable");
				
				// Get a new row based on the prototype row
				var prot = master.find(".prototype").clone();
				prot.attr("class", "")
				prot.find(".id").attr("value", id);
				
				master.find("tbody").append(prot);
			});
			
			// Remove button functionality
			$("table.dynatable button.remove").live("click", function() {
				$(this).parents("tr").remove();
				
			});
		});
		</script>
		<style>
			.dynatable {
				border: solid 1px #000; 
				border-collapse: collapse;
			}
			.dynatable th,
			.dynatable td {
				border: solid 1px #000; 
				padding: 2px 10px;
				width: 170px;
				text-align: center;
			}
			.dynatable .prototype {
				display:none;
			}
		</style>
	</head>
	<body>
		<table class="dynatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Col 3</th>
					<th>Col 4</th>
					<th><button class="add">Add</button></th>
				</tr>
			</thead>
			<tbody>
				<tr class="prototype">
					<td><input type="text" name="id[]" value="0" class="id" /></td>
					<td><input type="text" name="name[]" value="" /></td>
					<td><input type="text" name="col4[]" value="" /></td>
					<td><input type="text" name="col3[]" value="" /></td>
					<td><button class="remove">Remove</button>
				</tr>
		</table>
	</body>
</html>

javascript jquery

2 Contributors
6 Replies
176 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by newbie14

scrappedcola 11 Posting Whiz in Training

13 Years Ago

Start here: How JQuery Works. Read the API/Documentation on the Jquery Site, it is why it exists. Then after you have read about jQuery, come back, and ask specific questions about jQuery that you don't understand. All of your questions above can be answered if you RTFM.

scrappedcola 11 Posting Whiz in Training

13 Years Ago

var master = $(this).parents("table.dynatable");
var prot = master.find(".prototype").clone();

is Equivalent to doing this:

var prot = $(this).parents("table.dynatable").find(".prototype").clone();

What the above does is start from the triggering element and find it's parent table with a class of "dynatable" then it finds a row with the class of prototype and makes a copy which is stored in the variable "prot". You really want to set the class of the cloned row to "" because you only want one prototype row to be cloned in the future. If you left the class the same there would be multiple rows with the class prototype. Starting from the "this" element or an element with an ID and finding other elements from there is faster for IE which doesn't support the Javascript function getElementsByClassName. Another way to do the "var master = " code would to add an id attribute to the dynatable and then just

var master = $("#tableID");

But if you have multiple tables and add buttons you won't be able to do it this way so it really depends on how your page is organized and what you want to do with it.

If you are using IE you will want to use the developer tools in with the html tab selected and you need to refresh the DOM that the developer tools is looking at by using the circle arrow button. Then use the straight arrow button and your mouse to select the table. With Firefox and firebug when new elements are added firebug should automatically update with the current DOM.
and since the code is only accessing dynatable once it really isn't 100% necessary to var it off (though it is easier to read).

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

newbie14 0 Posting Pro · Answer 1 · 2011-03-22T08:23:13+00:00

Dear Friend,
Thank you for the link. Ok I understand better with those links. My question is that for this var master = $(this).parents("table.dynatable"); must we put the this statement or can be without it. This find(".prototype").clone(); I know ready it makes a copy of the row. This one why do we set the class value as empty prot.attr("class", "")? So how to view the table source when I populated with the rows?

newbie14 0 Posting Pro · Answer 2 · 2011-03-22T22:57:52+00:00

Dear Friend,
Thank you for your deep explanation. Actually about the class name being empty so now I better understand so you keep it like a template and just keep copying from it am I rite. Ok below is some changes I tried to made to the code. First I remove the display:none; from the .dynatable .prototype{}. Secondly when I add a new row the data get copied from the first row and I know why is this cause it copyied the entire row. So I tried like this prot.find("#col4").attr("value", ""); to clear the new row values but it does not work. Then next how to limit say a particular column just to decimal number via jquery. I need your help on this.

<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script>
		$(document).ready(function() {
			var id = 0;
			
			// Add button functionality
			$("table.dynatable button.add").click(function() {
				id++;
				var master = $(this).parents("table.dynatable");
				
				// Get a new row based on the prototype row
				var prot = master.find(".prototype").clone();
				prot.attr("class", "")
				prot.find(".id").attr("value", id);
				//prot.find("#col4").attr("value", "");				
				master.find("tbody").append(prot);
			});
			
			// Remove button functionality
			$("table.dynatable button.remove").live("click", function() {
				$(this).parents("tr").remove();
				
			});
		});
		</script>
		<style>
			.dynatable {
				border: solid 1px #000; 
				border-collapse: collapse;
			}
			.dynatable th,
			.dynatable td {
				background-color:#ccc; 
				font-size:14px;
				font-color:#ffffff;
				font-family:Calibri;
			}
			.dynatable .prototype {
				
			}
		</style>
	</head>
	<body>
		<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 >
		<table class="dynatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Col 3</th>
					<th>Col 4</th>
					<th><button class="add">Add</button></th>
				</tr>
			</thead>
			<tbody>
				<tr class="prototype">
					<td><input type="text" name="id[]" value="0" class="id" /></td>
					<td><input type="text" name="name[]" value="" /></td>
					<td><input type="text" name="years" value="" /></td>
					<td><input type="text" name="col4[]" value="" /></td>
					<td><button class="remove">Remove</button>
				</tr>
				
		</table>
		<input class="buttons" type="Submit" name="Submit" value="Submit">
	</form>
	</body>
</html>

scrappedcola 11 Posting Whiz in Training · Answer 3 · 2011-03-22T23:20:00+00:00

I don't see an input with an id of col4 so I'm guessing you mean the input with name='col4[]'. If that is the case there are 2 problems with the jquery you tried. First you need to do a search within the prototype row for input[name=col4[]]. The second to clear the value of the input you can just use the function .val().

prot.find("input[[name='col4[]']").val();

. You could also change the prototype row to give class names on each input (don't use an id as it will be copied and id's need to be unique). So your html will be

<td><input type="text" name="col4[]" class='col4' value="" /></td>

and your js would be

prot.find(".col4").val()

To set a default value in the inputs you can just use the .val() function with a value being passed into the function (.val("value")).

newbie14 0 Posting Pro · Answer 4 · 2011-03-23T09:59:02+00:00

Dear Friend,
Based on your suggestion below is my new code. I have tried both this prot.find("input[[name='col4[]']").val(); and prot.find(".dOnly").val(""); but both does not clear the default value from the first row. Next thing I have added this jQuery('.dOnly').keyup(function () to restrict it to decimal numbers only but it does not work too. Another thing I would like to ask is the names of each element must have the [] is it? Thank you.

<head>
		<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script>
		$(document).ready(function() {
			var id = 0;
			
			// Add button functionality
			$("table.dynatable button.add").click(function() {
				id++;
				var master = $(this).parents("table.dynatable");
				
				// Get a new row based on the prototype row
				var prot = master.find(".prototype").clone();
				prot.attr("class", "")
				prot.find(".id").attr("value", id);
				//prot.find("input[[name='col4[]']").val();	
				prot.find(".dOnly").val("");
				
        

				master.find("tbody").append(prot);
			});
			
			// Remove button functionality
			$("table.dynatable button.remove").live("click", function() {
				$(this).parents("tr").remove();
				
			});
			
			jQuery('.dOnly').keyup(function () 
			{     
				 this.value = this.value.replace(/[^0-9\.]/g,''); 
			}); 
			
			
		});
		</script>
		<style>
			.dynatable {
				border: solid 1px #000; 
				border-collapse: collapse;
			}
			.dynatable th,
			.dynatable td {
				background-color:#ccc; 
				font-size:14px;
				font-color:#ffffff;
				font-family:Calibri;
			}
			.dynatable .prototype {
				
			}
		</style>
	</head>
	<body>
		<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 >
		<table class="dynatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Col 3</th>
					<th>Col 4</th>
					<th><button class="add">Add</button></th>
				</tr>
			</thead>
			<tbody>
				<tr class="prototype">
					<td><input type="text" name="id[]" value="0" class="id" /></td>
					<td><input type="text" name="name[]" value="" /></td>
					<td><input type="text" name="col4[]" value="" class="dOnly" /></td>
					<td><input type="text" name="col3[]" value="" /></td>
					<td><button class="remove">Remove</button>
				</tr>
				
		</table>
		<input class="buttons" type="Submit" name="Submit" value="Submit">
	</form>
	</body>
</html>