js 动态生成表格案例

2019/09/07 00:42
阅读数 99

<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:0;
            margin:0;
        }
        table{
            width:500px;
            margin:100px auto;
            border-collapse:collapse;/*边框合并模式*/
            text-align:center;
        }
        td,th{  /*td是后面tbody中动态创建的单元格,th是thead里面那一行中的单元格*/
            border:1px solid #333;
        }
        thead tr{
            height:40px;
            background-color: #cccccc;
        }

<3>js动态创建表格:

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

var datas=[{
        name:"",
        subject:"javascript",
        score:100
    },{
        name:"",
        subject:"javascirpt",
        score:99
    },{
        name:"",
        subject:"javascript",
        score:98
    }];

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

for(var i=0;i<datas.length;i++)
{
   var tr=document.createElement("tr");
   tbody.appendChild(tr);  
}

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

for(var i=0;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=0;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=0; 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:0;
            margin:0;
        }
        table{
            width:500px;
            margin:100px auto;
            border-collapse:collapse;/*边框合并模式*/
            text-align:center;
        }
        td,th{
            border:1px solid #333;
        }
        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:100
    },{
        name:"",
        subject:"javascirpt",
        score:99
    },{
        name:"",
        subject:"javascript",
        score:98
    }];
    //2,往tbody里面创建行,有几个人(通过数组的长度)我们就创建几行
    var tbody=document.querySelector("tbody");
    for(var i=0;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=0;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链接所在单元格的所在行

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部