<1>布局：一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有4列（th),   下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的

<body>

<table>

    <thead>

        <tr>

            <th>姓名</th>

            <th>科目</th>

            <th>成绩</th>

            <th>操作</th>

        </tr>

    </thead>

    <tbody>

    </tbody>

</table>

</body>

<2>样式

<style>

        *{

            padding:;

            margin:;

        }

        table{

            width:500px;

            margin:100px auto;

            border-collapse:collapse;/*边框合并模式*/

            text-align:center;

        }

        td,th{  /*td是后面tbody中动态创建的单元格，th是thead里面那一行中的单元格*/

            border:1px solid #;

        }

        thead tr{

            height:40px;

            background-color: #cccccc;

        }

<3>js动态创建表格：

第一步：先准备数据，一共有三个人的成绩，作为三个对象放进数组中

 var datas=[{

        name:"甲",

        subject:"javascript",

        score:

    },{

        name:"乙",

        subject:"javascirpt",

        score:

    },{

        name:"丙",

        subject:"javascript",

        score:

    }];

第二步：在tbody里面创建每一行，行数就等于datas数组的长度，有几个人的成绩就有几行

for(var i=;i<datas.length;i++)

{

   var tr=document.createElement("tr");

   tbody.appendChild(tr);

}

第三步：在已经创建好的行 tr 中，创建单元格, 注意是跟数据有关的三个单元格，td单元格的数量取决于datas[ ] 数组中每个对象的属性个数

for(var i=;i<datas.length;i++)

{

   var tr=document.createElement("tr");

   tbody.appendChild(tr);

      for(var k in datas[i])

        {

               var td=document.createElement("td");

               tr.appendChild(td);

               td.innerHTMl=datas[i][k];

        }

}

这里用for循环遍历数组 ， k得到的是属性名，obj[k]得到的是属性值

　　　　for( var k in obj)　{

　　　　}

第四步：在每一行里面创建有删除二字的单元格：

for(var i=;i<datas.length;i++)

{

   var tr=document.createElement("tr");

   tbody.appendChild(tr);

    for(var k in datas[i])

   {

       var td=document.createElement("td");

       tr.appendChild(td);

       td.innerHTML=datas[i][k];

   }

    var td=document.createElement("td");

    tr.appendChild(td);

    td.innerHTML="<a href="javascript:;">删除</a>" ;

}

第五步：删除操作，点击“删除”，所点击的那一行就会被删除

var as=document.querySelectorAll("a");

for(var i=; i<as.length;i++)

{

   as[i].onclick=function()

   {

     tbody.removeChild(this.parentNode.ParentNode);

   }

}

全部完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding:;

            margin:;

        }

        table{

            width:500px;

            margin:100px auto;

            border-collapse:collapse;/*边框合并模式*/

            text-align:center;

        }

        td,th{

            border:1px solid #;

        }

        thead tr{

            height:40px;

            background-color: #cccccc;

        }

    </style>

</head>

<body>

<table>

    <thead>

        <tr>

            <th>姓名</th>

            <th>科目</th>

            <th>成绩</th>

            <th>操作</th>

        </tr>

    </thead>

    <tbody>

    </tbody>

</table>

</body>

</html>

<script>

    //1,先准备数据

    var datas=[{

        name:"甲",

        subject:"javascript",

        score:

    },{

        name:"乙",

        subject:"javascirpt",

        score:

    },{

        name:"丙",

        subject:"javascript",

        score:

    }];

    //2,往tbody里面创建行，有几个人（通过数组的长度）我们就创建几行

    var tbody=document.querySelector("tbody");

    for(var i=;i<datas.length;i++)  //外面的for循环 是 行tr

    {

        var tr=document.createElement("tr");

        tbody.appendChild(tr);

        //3,往tr每一行里面创建单元格（跟数据有关系的3个单元格），td单元格的数量取决于每个对象的属性个数 for循环遍历对象 datas[i]

        for(var k in datas[i])   //里面的for循环是 列

        {

            var td=document.createElement("td");  //创建单元格

            tr.appendChild(td);

            td.innerHTML=datas[i][k]; //把对象里面的属性值 datas[i][k]给td

        }

        //4，创建有删除二字的单元格

        var td=document.createElement("td");

        tr.appendChild(td);

        td.innerHTML="<a href='javascript:;'>删除</a>";

    }

    //5,删除操作

    var as=document.querySelectorAll("a");

    for(var i=;i<as.length;i++)

    {

        as[i].onclick=function () {  //点击a 删除 当前a 所在的行（a链接的爸爸的爸爸）

            tbody.removeChild(this.parentNode.parentNode);

        }

    }

</script>

关键代码：

1，var  datas=[{ }, { }, { }] ;  用数组准备数据

2，行数是通过数组的长度创建（datas.length)，包含数据的列数是根据数组中每个对象的属性的个数创建 (datas[i] ) , 都是通过for循环遍历，外面的for循环遍历行，里面的for循环遍历列，从而创建单元格

3，td.innerHTML=datas[i][k];   把数组中每个对象的每个属性值依次赋给单元格 td

4，最后一列的所有“删除”的单元格单独创建，也是根据行数创建

5，td.innerHTML="<a href='javascript:;'>删除</a>";     href属性等于“javascript:;” ,可以避免页面跳转

6，tbody.removeChild(this.parentNode.parentNode;   删除操作中是tbody需要删除某一个孩子（某一行），表示为当前点击的a链接所在单元格的所在行

js 动态生成表格案例的更多相关文章

  1. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  2. js动态生成表格

    动态生成表格           *创建一个页面:两个输入框和一个按钮 *代码和步骤                      /*                          1.得到输入的行 ...

  3. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  4. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  5. 抓取js动态生成的数据分析案例

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  6. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  7. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  8. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  9. JavaScript中动态生成表格

    动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:行:<input type="text" id="row" value="5 ...

随机推荐

  1. LeetCode 116/117. 填充同一层的兄弟节点（Populating Next Right Pointers in Each Node）

    题目描述 给定一个二叉树 struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } 填充 ...

  2. AC自动机小记

    不知不觉这篇博客已经被我咕咕咕了一个月了. 也许我写过AC自动机的博客,但我也不知道我写没写过 前情回顾之\(kmp\) \(kmp\)用来解决一个模式串匹配一个文本串的问题,其思路是设置失配指针,找 ...

  3. kolla-ansible-----cinder存储配置

    对接lvm后端存储 1.创建vg 可以使用裸盘或者可以采用Das.iscsi-san.fc-san等方式经存储映射到宿主机本地,然后在进行如下操作 (a)创建LVM 物理卷 /dev/sdb pvcr ...

  4. leetcode 452用少量的箭射爆气球

    类似于区间调度问题,使用贪心算法:首先对所有气球按照起始坐标大小排序,然后每次总是优先选择起始坐标小的气球中的右边坐标,然后再选择下一个: 排完序之后,下一个可能有如上图所示几种情况, 1)   当n ...

  5. 远程连接elasticsearch遇到的问题

    本文转自:https://blog.csdn.net/xuchuangqi/article/details/78989940 1.首先要远程连接就要把配置文件的network.host: 改为 net ...

  6. 想使用 MongoDB ，你应该了解这8个方面!

    想使用 MongoDB ,你应该了解这8个方面! 应用性能高低依赖于数据库性能,MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写,旨在为 WEB 应用提供可扩展的高性能数据存储解 ...

  7. java：容器/集合Collection（List（ArrayList，LinkedList，Vector），Set（HashSet（LinkedHashSet），TreeSet））

    /** * Collection接口  不唯一,无序 * 常用的方法: * add(Object e) 确保此 collection 包含指定的元素(可选操作). * size():获取集合中元素的个 ...

  8. java游戏服务器--简单工厂模式

    先来学习下简单工厂模式! 我们知道在游戏里有很多的场景,例如:帮派场景,副本场景,野外场景... 现在我们有这样的需求: 1.我们需要进入帮派场景时---开始执行帮派任务. 2.我们需要进入副本场景时 ...

  9. AJAX中同步和异步的区别和使用场景

    一.简介Ajax请求最重要的问题是代码执行的顺序.最长遇到的问题是,我们定义一个变量接收ajax异步请求的返回结果,后续代码使用,然而后续代码在使用时该变量为初始值,始终得不到想要的结果!!!二.示例 ...

  10. 【HANA系列】SAP HANA跟我学HANA系列之创建分析视图一

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA跟我学HANA系 ...