精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

@Frederick

于 2019-05-29 15:02:16 發布

5792

 收藏 7

分類專欄： javascript 文章標簽： javascript

版權

javascript

專欄收錄該內容

1 篇文章0 訂閱

訂閱專欄

   <table width="600" border="1" cellspacing="0">

         <thead>

             <tr>

               <th>編號</th>

               <th>姓名</th>

  <th>職位</th>

  <th>年齡</th>

  <th>操作</th>

</tr>`

</thead>

         <tbody id="tbMain"></tbody>

         <tfoot id="tdfoot"> 

<tr>

               <th></th>

               <th></th>

  <th>合計</th>

  <th></th>

  <th></th>

</tr>

</tfoot>

   </table>

<script type="text/javascript">

    //模擬一段JSON數據，實際要從數據庫中讀取

var per = [

{id:001,name:"張三",job:"學生",age:14},

     {id:002,name:"李四",job:"教師",age:34},   

     {id:003,name:"王五",job:"經理",age:44}

];

    window.onload = function(){

      var tbody = document.getElementById("tbMain");

      for(var i =0; i<per.length; i++){ //遍歷一下json數據

         var trow  = getDataRow(per[i]);  //定義一個方法,返回tr數據

         tbody.appendChild(trow);

 }

     //年齡求和

      var calcTotal = function (table,column){

var trs = table.getElementsByTagName('tr');

//alert(trs.length);

var total = 0;

for(var i = 0; i < trs.length; i++){

           var td = trs[i].getElementsByTagName('td')[column];

  var t = parseFloat(td.innerHTML);

           if(t)total+=t;

}

document.getElementById("tdfoot").getElementsByTagName('th')[column].innerHTML = total;

};

      calcTotal(document.getElementById('tbMain'),3);

}

   function getDataRow(h){

    var row = document.createElement("tr"); //創建行

var idCell = document.createElement("td"); //創建列

idCell.innerHTML = h.id;//填充數據

row.appendChild(idCell);//加入行，一下類似

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

nameCell.innerHTML = h.name;

    row.appendChild(nameCell);

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

    jobCell.innerHTML = h.job;

row.appendChild(jobCell);

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

    ageCell.innerHTML = h.age;

row.appendChild(ageCell);

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

    row.appendChild(delCell);

var btnDel = document.createElement("input");//創建一個input控件

     btnDel.setAttribute('type','button');//type="button"  

btnDel.setAttribute('value','刪除');

   //刪除操作

btnDel.onclick = function(){

      if(confirm("確定刪除這一行嗎？")){

      //找到按鈕所在行的節點，然后刪掉這一行  

         this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

 }

}

delCell.appendChild(btnDel);

     return row;//返回tr數據

   }

</script>

————————————————

版權聲明：本文為CSDN博主「@Frederick」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。