jQuery 3 - Creating & Modifying The DOM
Written by Ian Elliot   
Monday, 31 October 2016
Article Index
jQuery 3 - Creating & Modifying The DOM
Move and Copy
Inserting, Replacing & Removing
Building a Dynamic Table

Building A Dynamic Table

We could continue with the theory of DOM creation and manipulation for a lot longer but it is time for a simple example. Suppose you want to generate a table dynamically. Then what you need to do is build a sub-tree with the required rows and  data cells. The best way to do this is to create a function so that you can stamp out as many tables as you require:

function table(n, m) {

In this example the table will have n rows and m columns but you can add additional parameters or better an options object to set other details of the table.

The first thing to do is to create one object of each type that we are going to use to build the table - one table, one table body, one table row and one table data cell:

var table = $("<table>");
var tbody = $("<tbody>");
var row = $("<tr>");
var cell = $("<td>");

The idea is that once we have one of each type of object we can build the table using append.

First we need to create n rows and the simplest way to do this is to use a for loop and the clone method to create a new row object. You might say why not just create a new row object but the idea is that if the row object has already been customized in some way it is simpler to stamp out copies than to create new objects from scratch:

for (var i = 0; i < n; i++) {
 var tempRow = row.clone();

Now we have a row object we can create some data cells and append them:

for (var j = 0; j < m; j++) {
  tempRow.append(cell.clone().html(i+","+j));
}

Again the clone method is used so as to replicate any custom settings on the basic cell object Notice that to give the table something to display we use the html method to add some content  - the row and column number.

Once the row has been built we can append it to the table body and let the row for loop continue. Finally we append the table body to the table object and return it as the result:

tbody.append(tempRow);
}
table.append(tbody);
return table;
}

The complete function is:

function table(n, m) {
 var table = $("<table>");
 var tbody = $("<tbody>");
 var row = $("<tr>");
 var cell = $("<td>");
 for (var i = 0; i < n; i++) {
  var tempRow = row.clone();
  for (var j = 0; j < m; j++) {
   tempRow.append(cell.clone().html(i+","+j));
  }
  tbody.append(tempRow);
 }
 table.append(tbody);
 return table;
}

To use it you would simply call it and append the result to whatever element you wanted to:

$("body").append(table(3, 2));

There are many ways of creating a table using jQuery and you can argue issues of efficiency verses elegance. If efficiency isn't a big issue, and with browsers and JavaScript engines getting faster it often isn't then this sort of construction is easier to understand and more logically structured than yards of HTML.

Of course, if you really want to create an "enterprise" quality custom control, you probably should create at the very least a jQuery addin and preferably a jQuery UI widget - which is something we will find out how to do in a later chapter.

 

More Information

http://jquery.com/

 

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it
India             Amazon.in
Japan             Amazon.jp

 

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it
India           Amazon.in
Japan          
Amazon.jp

 

 

 

Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

 

Banner


JavaScript Canvas - Text, Typography & SVG

For a Canvas object, drawing text is just another path to render. You can select a font and then render the shapes or glyphs it defines using stroke and fill methods. Going beyond this there are a lot [ ... ]



JavaScript Canvas - Image Processing

You can use Canvas to draw new graphics or you can load existing images and process them at the pixel level. In this extract from a chapter in my new book on JavaScript Graphics we look at how it work [ ... ]


Other Articles

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, Facebook or Linkedin.

 

graphics

 



 

Comments




or email your comment to: comments@i-programmer.info

 

Banner


JavaScript Canvas - Text, Typography & SVG

For a Canvas object, drawing text is just another path to render. You can select a font and then render the shapes or glyphs it defines using stroke and fill methods. Going beyond this there are a lot [ ... ]



JavaScript Canvas - Image Processing

You can use Canvas to draw new graphics or you can load existing images and process them at the pixel level. In this extract from a chapter in my new book on JavaScript Graphics we look at how it work [ ... ]


Other Articles



Last Updated ( Wednesday, 30 November 2016 )