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

February 28, 2023 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>
    <tbody id="tbl_content">
    </tbody>
</table>
<!-- A template structure for customers -->
<script type="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 = function tmpl(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).
      new Function("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 user
    return data ? fn( data ) : fn;
  };
})();
</script>

<!-- Your code for rendering -->
<script type="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.

Baca Juga

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>
<script src="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>
<table class="myTable">
   <tr>
    <td>Name</td>
    <td>Customer ID</td>
    <td>Rent</td>
   </tr>
</table>
</body>
</html>

JavaScript Info

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

Solution 1:

Solution 2:

Solution 3:

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