Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

How To Dynamically Load The Data From Customers To A Table In Javascript Within Html

Post a Comment
I need to load the data name, customerId, rentCost of customers into a table but I am not sure which JavaScript code I can use to insert it as rows into the table. Really appreciat

Solution 1:

With Jquery i would do this :

for(var i=0;i<customers.length;i++)
    $("table").append(...) ...

Check fiddle: http://fiddle.jshell.net/r9ffb/

Solution 2:

It will take a little time to understand, but it's really worth it.

Just copy below code and play a little and you will understand, how easy it is.

Also you can use this concept in a large scale.

<!-- customer table --><table><tr><td>Name</td><td>Customer ID</td><td>Rent</td></tr><tbodyid="tbl_content"></tbody></table><!-- A template structure for customers --><scripttype="text/template"id="tbl_content_tmpl"><tr><td><%= name %></td><td><%= customerID %></td><td><%= rentCost %></td></tr></script><!-- Below is a simple, best, and old javascript templating engine --><script>// Simple JavaScript Templating// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};

  this.tmpl = functiontmpl(str, data){
    // Figure out if we're getting a template, or if we need to// load the template - and be sure to cache the result.var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // Generate a reusable function that will serve as a template// generator (and which will be cached).newFunction("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}"with(obj){p.push('" +

        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

    // Provide some basic currying to the userreturn data ? fn( data ) : fn;
  };
})();
</script><!-- Your code for rendering --><scripttype="text/javascript">var customers= [
{
    name: "Bill Custer", 
    customerID:"122", 
    rentCost:"$550", 

},
{       
    name: "Sarah Hill", 
    customerID:"160", 
    rentCost:"$600",
}
];
//console.log(customers);for(var i in customers) {
    document.getElementById("tbl_content").innerHTML += tmpl("tbl_content_tmpl", customers[i]);
}
</script>

It will also work for a very large javascript object.

You can write JS code inside templates.

Ref: http://ejohn.org/blog/javascript-micro-templating/

Solution 3:

Try this.. you can use JQuery to append rows dynamically to your table. 

<html><head><scriptsrc="jquery.js"></script><script>var customers = [
  {
     name: "Bill Custer", 
     customerID:"122", 
     rentCost:"$550"
  },
  {       
     name: "Sarah Hill", 
     customerID:"160", 
     rentCost:"$600"
  }
  ];

 for(var i = 0; i < customers.length; i++) {
    $(".myTable").append("<tr><td>"+customers[i].name+"</td><td>"+customers[i].customerID+"</td><td>"+customers[i].rentCost+"</td></tr>");
 }

</script></head><body><tableclass="myTable"><tr><td>Name</td><td>Customer ID</td><td>Rent</td></tr></table></body></html>

Post a Comment for "How To Dynamically Load The Data From Customers To A Table In Javascript Within Html"