<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. kotlin 简单处理 回调参数 加？

    Kotlin Parameter specified as non-null is null 2017年10月18日 17:21:49 amiko_ 阅读数:9017    版权声明:本文为博主原创文 ...

  2. servlet与jsp的九大内置对象

  3. Maven项目解决Remove '@override' annotation终极方案

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  4. java期末课程总结

    期末课程总结 转眼间,这个学期就要过去了,我们Java的学习也接近了尾声,回想到这个学期刚开始接触到Java的时候,感觉什么都不懂,但现在似乎有了门路,不会载懵懵懂懂, 虽然本学期面向对象与Java程 ...

  5. What is the most efficient way to deep clone an object in JavaScript?

    What is the most efficient way to deep clone an object in JavaScript? Reliable cloning using a libra ...

  6. better-scroll 滑动插件的使用

    better-scroll 滑动插件的使用 拥有的效果:下拉刷新.上拉加载.滑动.轮播

  7. 如何将打印内容转换为bmp位图文件

    bmp是一种与硬件设备无关的图像文件格式,使用非常广.它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BblP文件所占用的空间很大.BMP文件的图像深度可选lbit.4bit.8 ...

  8. chrome浏览器爬虫WebDriverException解决采用python + selenium + chrome + headless模式

    WebDriverException: Message: unknown error: Chrome failed to start: crashed 第一种:如果出现下面情况: chrome浏览器有 ...

  9. 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_04.入门程序之搭建开发环境

    选择骨架构建 默认选中next-然后finish后就会去网上下载插件.会比较耗费时间. 添加一组键值对: archetypeCatalog internal 添加了这组坚持对,就可以解决Mavn项目创 ...

  10. 十三：jinja2过滤器之default过滤器和or过滤器

    在模板里面有时候需要对传过来的数据进行一些处理,jinja2有一些内置的过滤器可以进行处理.类似于python内置函数,通过 “|” 进行使用,详见jinja2官方文档 使用方法:{{ 变量名|过滤器 ...