如何在html中用javascript将客户的数据动态加载到表中_Javascript_Html

如何在html中用javascript将客户的数据动态加载到表中

javascript html

如何在html中用javascript将客户的数据动态加载到表中,javascript,html,Javascript,Html,我需要将客户的数据名、customerId、rentCost加载到表中，但我不确定可以使用哪种JavaScript代码将其作为行插入表中。非常感谢你的帮助。这是密码 <html> <head> </head> <script> script> var customers= [ { name: "Bill Custer", customerID:"122", rentCost:"$550", }, {

我需要将客户的数据名、customerId、rentCost加载到表中，但我不确定可以使用哪种JavaScript代码将其作为行插入表中。非常感谢你的帮助。这是密码

<html>
<head>
    </head>
<script>
script>
var customers= [
{
    name: "Bill Custer", 
    customerID:"122", 
    rentCost:"$550", 

},
{       
    name: "Sarah Hill", 
    customerID:"160", 
    rentCost:"$600",
}
];

</script>
<body>
<table>
    <tr>
        <td>Name</td>
        <td>Customer ID</td>
        <td>Rent</td>

    </tr>
</table>
</body>
</html>


脚本>
var客户=[
{
姓名：“比尔·卡斯特”，
customerID:“122”，
租金：“$550”，
},
{       
姓名：“莎拉·希尔”，
客户ID:“160”，
租金：“$600”，
}
];
名称
客户ID
租

使用Jquery，我会这样做：

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

for（var i=0；i试试这个..您可以使用JQuery将行动态附加到表中
<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>


var客户=[
{
姓名：“比尔·卡斯特”，
customerID:“122”，
租金：“$550”
},
{       
姓名：“莎拉·希尔”，
客户ID:“160”，
租金：“$600”
}
];
对于（变量i=0；i
理解它需要一点时间，但它确实是值得的
只需复制下面的代码并播放一点，您就会明白，这是多么容易
你也可以大规模地使用这个概念
<!-- 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>


名称
客户ID
租
//简单的JavaScript模板
//约翰·雷斯格-http://ejohn.org/ -麻省理工学院许可
（功能（）{
var cache={}；
this.tmpl=函数tmpl（str，data）{
//弄清楚我们是否得到了一个模板，或者我们是否需要
//加载模板-并确保缓存结果。
变量fn=！/\W/.test（str）？
缓存[str]=缓存[str]||
tmpl（document.getElementById（str.innerHTML）：
//生成将用作模板的可重用函数
//生成器（将被缓存）。
新功能（“obj”，
var p=[]，print=function（）{p.push.apply（p，参数）；}+
//使用with（）{}将数据作为局部变量引入
“与（obj）{p.push（'”+
//将模板转换为纯JavaScript
str
.replace（/[\r\t\n]/g，“”）
.split（“您需要使用JavaScript模板引擎。我建议您检查underline.js。您可以使用它做很多事情。尝试一下，发布结果，如果您还需要什么，请询问。只需先尝试一下。或者您可以选择其他引擎（请参阅）javascript或jqueryOne中需要dom操作还有一个好处，这可以保护视图部分不被编码。您的设计可以直接实现到JS模板中