Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?



jQuery - Add a row to a table


3 replies to this topic - - - - -

#1 jbrooksuk

    Beta meta.

  • 598 posts
  • Joined: 04-June 09
  • Location: United Kingdom
  • OS: OSX Lion 10.7.4
  • Phone: iPhone 4S

Posted 02 July 2009 - 15:22

Hey,

I posted this tutorial on my blog. It describes the use of jQuery and how to add a row to a table. Hopefully this will be one in many tutorials.

Feedback would be good, I did this in 10 minutes I had free whilst working. Helped me concentrate again.

http://www.james-brooks.net/?p=281

James


#2 vetIran Man

    Formerly Kudos

  • 3,433 posts
  • Joined: 19-October 04
  • Location: Ireland

Posted 02 July 2009 - 20:47

When hooking into anchor tags, you should be returning false to stop the default action of navigating to the location in the href, even if it's only a #.

<!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">

<head>
<title>Add Row example</title>
<script src="dist/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 <!-- jQuery Code will go underneath this -->
 $(document).ready(function () {	
 	// Code between here will only run when the document is ready
 	$("a[name=addRow]").click(function() {
 		// Code between here will only run when the a link is clicked and has a name of addRow
 		$("table#myTable tr:last").after('<tr><td>Row 4</td></tr>');
		return false;
 	});
 });
</script>
</head>

<body>

<table style="width: 100%" id="myTable">
 <tr><td>Row 1</td></tr>
 <tr><td>Row 2</td></tr>
 <tr><td>Row 3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>

</body>

</html>


#3 OP jbrooksuk

    Beta meta.

  • 598 posts
  • Joined: 04-June 09
  • Location: United Kingdom
  • OS: OSX Lion 10.7.4
  • Phone: iPhone 4S

Posted 02 July 2009 - 21:17

View PostKudos, on Jul 2 2009, 21:47, said:

When hooking into anchor tags, you should be returning false to stop the default action of navigating to the location in the href, even if it's only a #.
Yes you are correct. This is what happens when you don't have that much time.

I shall add it when my network is working again.

#4 vebjorn

    Resident One Post Wonder

  • 1 posts
  • Joined: 30-October 10

Posted 30 October 2010 - 12:17

Seems like your page has been moved.. Can you please update the link?
Vebjørn

View Postjbrooksuk, on 02 July 2009 - 15:22, said:

Hey,

I posted this tutorial on my blog. It describes the use of jQuery and how to add a row to a table. Hopefully this will be one in many tutorials.

Feedback would be good, I did this in 10 minutes I had free whilst working. Helped me concentrate again.

http://www.james-brooks.net/?p=281

James