JavaScript创建表格的方法

本文实例为大家分享了JavaScript创建表格的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>

</head>
<body>
<div id = "mountains"></div>

<script>
 let MOUNTAINS = [
  {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
  {name: "Everest", height: 8848, place: "Nepal"},
  {name: "Mount Fuji", height: 3776, place: "Japan"},
  {name: "Vaalserberg", height: 323, place: "Netherlands"},
  {name: "Denali", height: 6168, place: "United States"},
  {name: "Popocatepetl", height: 5465, place: "Mexico"},
  {name: "Mont Blanc", height: 4808, place: "Italy/France"}
 ];

 // 创建表格
 function buildTable(data) {
  let table = document.createElement("table");
  let tr = document.createElement("tr");
  // 通过 for in 循环遍历对象,得到对象的属性,为表头添加内容
  for (let i in data[6]) {
   let th = document.createElement("th");
   th.innerText = i;
   tr.appendChild(th);
  }
  table.appendChild(tr);
  // 通过 forEach 循环遍历对象数组,为表格添加行
  data.forEach((value, index) => {
   let tr = document.createElement("tr");
   // 通过 for in 循环遍历对象,得到对象的属性,给每行添加内容
   for (let index1 in data[index]) {
    let td = document.createElement("td");
    td.innerText = data[index][index1];
    tr.appendChild(td);
   }
   table.appendChild(tr);
  });
  //设置表格的对齐属性,和边框属性
  table.setAttribute("text-align", "right");
  table.setAttribute("border","1");

  return table;
 }

 document.querySelector("div").appendChild(buildTable(MOUNTAINS));
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript 动态创建表格的2种方法总结

    第一种方法: 复制代码 代码如下: <html>         <head>             <script>                 function createTable(rows,lines){                     this.rows=rows;                     this.lines=lines;                     var Body=document.getElementById

  • 解析js原生方法创建表格效率测试

    我们先看一下三种算法以及在各种浏览器下的表现.第一种: 直接操作dom. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>     

  • 基于JavaScript实现动态创建表格和增加表格行数

    在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

  • javascript动态创建表格及添加数据实例详解

    本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

  • JavaScript与DOM组合动态创建表格实例

    JavaScript与DOM组合动态创建表格实例

    这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列

  • javascript如何创建表格(javascript绘制表格的二种方法)

    1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前.默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后.一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行. i

  • JS封装的自动创建表格的实现代码

    为接下来要做一个动态输入的表格积累的资料,非常不错,下面分享给大家,供大家参考,如果有更好的插件和封装的东西,共享下哈.. 关键代码如下: <script type="text/javascript"> var currentActiveRow; //选中的颜色 var customTable = function() { }; customTable.prototype = { init: { ajaxUrl: "", tId: "tbody

  • JavaScript 学习笔记（十三）Dom创建表格

    Dom基础-创建表格 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().但第一种有可能在IE上有问题,所以推荐使用第二种. 1.insertRow(index):index从0开始 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前.默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后.一般我们在使用的时候都是: objTable.insertRow (ob

  • javascript 动态创建表格

    复制代码 代码如下: <html>         <head>             <script>                 function createTable(rows,lines){                     this.rows=rows;                     this.lines=lines;                     var Body=document.getElementById('body'

  • js动态创建表格,删除行列的小例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • Javascript动态创建表格及删除行列的方法

    本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

随机推荐