（day04—2）动态创建表格

<!DOCTYPE HTML>
<html>
<head>
<title>动态创建表格</title>
<meta charset="utf-8" />
<style>
	table{width:600px; border-collapse:collapse;
		text-align:center;
	}
	td,th{border:1px solid #ccc}
</style>

</head>
<body>
  <!-- 手动新建table、thead、tr、th -->
  <div id="data">
    <table>
      <thead>
        <tr>
          <th>ename</th>
          <th>salary</th>
          <th>age</th>
          <th>delete</th>
        </tr>
      </thead>
    </table>
  </div>

	<div id="data"></div>
  <script>
	var json=[
    {"ename":"Tom", "salary":11000, "age":25},
    {"ename":"John", "salary":13000, "age":28},
    {"ename":"Mary", "salary":12000, "age":25}
  ];


    //创建一个table
    // var table=
    //   document.createElement("table");
    // //创建thead
    // var thead=
    //   document.createElement("thead");
    // //将thead追加到table下
    // table.appendChild(thead);

    // //创建tr
    // var tr=
    //   document.createElement("tr");
    // //将tr追加到thead下
    // thead.appendChild(tr);
    // //遍历json数组中第一个对象的每个key
    // for(var key in json[0]){
    //   //创建th
    //   var th=
    //     document.createElement("th");
    //   //设置th的内容为key
    //   th.innerHTML=key;
    //   //将th添加到tr下
    //   tr.appendChild(th);
    // }


  
    //创建tbody
    var tbody=
      document.createElement("tbody");
    // //将tbody追加到table
    // table.appendChild(tbody);
    //遍历json中每个员工
    for(var emp of json){
      //每遍历一个员工对象，就创建一个tr，并添加到tbody中
              // var tr=document.createElement("tr");
              // tbody.appendChild(tr); //将tr追加到tbody中
      //简写：
      var tr=tbody.insertRow(0);

      //遍历当前员工的每个属性
      for(var key in emp){
        //每遍历一个属性，就添加一个td，并追加到tr中，同时设置td的内容为属性值
              //  var td=document.createElement("td");
              //  td.innerHTML=emp[key];   //设置td的内容为key对应的属性值
              //  tr.appendChild(td);   //将td追加到tr中
        
        //简写：
        var td=tr.insertCell();
        td.innerHTML=emp[key];
      }
      //再为当前行添加完整数据单元格之后，再添加删除按钮所在格
      var td=tr.insertCell();
      td.innerHTML=`<button>x</button>`;
    }
    
    //最后，将tbody整体添加到table下
    //找到id为data下的table元素
    var table=document.querySelector("#data>table");
    table.appendChild(tbody);


    //1、在整个table创建完后，找到所有tbody下的button元素
    var btns=tbody.getElementsByTagName("button");
    console.log(btns);//打桩

    //2、绑定单击事件函数
    for(var btn of btns){
      btn.onclick=function(){
        var btn=this;
        //执行删除前，先找到按钮所在的行对象
        var tr=btn.parentNode.parentNode;
              //       td         tr
        //
        //
        var ename=tr.cells[0].innerHTML;
        //删除前，与用户确认
        var bool=confirm(`是否删除 ${ename} ？`);
        //若用户点击确认删除
        if(bool==true){
          //才删除按钮所在的行
          table.deleteRow(tr.rowIndex);
        }
      }
    }


  </script>
</body>
</html>

<!-- 什么是select -->
<select>
  <!-- 文档片段 -->
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
在这里插入图片描述
（day04—2）动态创建表格

猜你喜欢
