快捷導(dǎo)航

JavaScript實現(xiàn)網(wǎng)頁動態(tài)生成表格

更新時間：2020年11月25日 10:47:32 作者：我是Dreamer啊

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁動態(tài)生成表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JavaScript(JS)網(wǎng)頁–動態(tài)生成表格，供大家參考，具體內(nèi)容如下

在網(wǎng)頁中，動態(tài)生成列表的內(nèi)容，將數(shù)組中的object加入到列表中（沒學(xué)到數(shù)據(jù)庫）。在HTML中創(chuàng)建thead，然后通過JavaScipt動態(tài)生成tbody。并且在每行最后申城一個單元格，加入刪除操作，點擊刪除可以刪除此行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>動態(tài)生成表格</title>
 <style>
  table {
   border-collapse: collapse;
   margin-top: 200px;
   margin-left: 500px;
  }
  table th{
   border: 1px solid black;
   width: 80px;
   height: 40px;
   text-align: center;
   background-color: cornsilk;
  }

  table td{
   
   border: 1px solid black;
   width: 80px;
   height: 40px;
   text-align: center;

  }

 </style>
</head>
<body>
 <table>
  <thead>
   <tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成績</th>
    <th>操作</th>
   </tr>
  </thead>
  <tbody>
   <!-- <tr>
    <td>張三</td>
    <td>JavaScript</td>
    <td>100</td>
    <td><a href="JavaScript:;" >刪除</a></td>
   </tr>
   <tr>
    <td>李四</td>
    <td>JavaScript</td>
    <td>95</td>
    <td><a href="JavaScript:;" >刪除</a></td>
   </tr>
   <tr>
    <td>王五</td>
    <td>JavaScript</td>
    <td>98</td>
    <td><a href="JavaScript:;" >刪除</a></td>
   </tr>
   <tr>
    <td>趙六</td>
    <td>JavaScript</td>
    <td>91</td>
    <td><a href="JavaScript:;" >刪除</a></td>
   </tr> -->
  </tbody>
 </table>
 <script>

  //加入數(shù)據(jù)
  var datas = [
   {
    name:'張三',
    subject:'JavaScript',
    score:'100'
   },
   {
    name:'李四',
    subject:'JavaScript',
    score:'95'
   },
   {
    name:'王五',
    subject:'JavaScript',
    score:'98'
   },
   {
    name:'趙六',
    subject:'JavaScript',
    score:'92'
   }
  ];
  //創(chuàng)建行，有幾個人就創(chuàng)建幾行
  var tbody =document.querySelector('tbody')
  for(var i = 0 ; i < datas.length ; i++){
   //創(chuàng)建行
   var tr = document.createElement('tr');
   tbody.appendChild(tr);
   //創(chuàng)建單元格
   for (var k in datas[i] ){
    var td = document.createElement("td");
    td.innerText = datas[i][k];
    tr.appendChild(td);
   }
   //創(chuàng)建刪除單元格
   var td = document.createElement('td');
   td.innerHTML = '<a href="JavaScript:;" >刪除</a>';
   tr.appendChild(td);
  }
  var as = document.querySelectorAll('a');
  for (var i = 0 ; i <as.length ; i++){
   as[i].onclick = function(){
    //點擊a 刪除當(dāng)前行
    tbody.removeChild(this.parentNode.parentNode);
   }
  }

  // for (var k in Obj){
  //  k 得到的是屬性名
  //  dbj[k] 得到的是屬性值
  // }
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: