1. 程式人生 > >js 動態表格

js 動態表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
     table{border-collapse:collapse;width:100%;height:50px;font-size:14px;}
     table td{border:1px solid #000;}
  </style>
 </HEAD>

 <BODY>
    <input type="button" value="新增一行" onclick="addTr()"/>
    <input type="button" value="刪除選中" onclick="delTrS()"/>
 <table>
    <thead>
       <tr>
         <td>全選<input type="checkbox" name="quanxuan" id="quanxuan" onclick="checkAll()"/> 
         </td><td>商品名稱</td><td>商品單價</td><td>商品數量</td><td>商品金額</td><td>操作</td>
       </tr>
    </thead>
    <tbody id="tbody">
      <tr>
        <td><input type="checkbox" class="ck" onclick="hj()"/></td>
        <td><input type="text" class="productName"/></td>
        <td><input type="text" class="price" onblur="getCountMoney(this)"/></td>
        <td>
            <input type="button" value="+" class="addnum" onclick="addnum(this)">
            <input type="text" class="productSum" onblur="getCountMoney(this)"/>
            <input type="button" value="-" class="addnum" onclick="addnum(this)">
        </td>
        <td><span class="countMoney"></span></td>
        <td onclick="delBtn(this)">刪除</td>
      </tr>
     </tbody>
   </table>
   <h1>合計:</h1><span id="hj"></span>
 </BODY>

 <script>
    var tbody=document.getElementById("tbody");
    //更改商品數量
    function addnum(obj){
        var tr=obj.parentNode.parentNode;
        var fh=tr.getElementsByClassName("addnum");
        var addnum=tr.getElementsByClassName("productSum");
        //console.log(addnum[0].value);
        if(obj.value=="+"){
            var sum=Number(addnum[0].value)+1;
            tr.getElementsByClassName("productSum")[0].value=sum;
            getCountMoney(obj);
        }else if(obj.value=="-"){
            var sum1=Number(addnum[0].value)-1;
            tr.getElementsByClassName("productSum")[0].value=sum1;
            getCountMoney(obj);
        }    
        hj();
    }
    //計算商品金額
    function getCountMoney(obj){
        var tr = obj.parentNode.parentNode;
        var price=tr.getElementsByClassName("price");
        var productSum=tr.getElementsByClassName("productSum");
        var sum=Number(price[0].value)*Number(productSum[0].value);
        tr.getElementsByClassName("countMoney")[0].innerHTML=sum;
        hj();
    }
    //新增行
    function addTr(){
        var tr=document.createElement("tr");
        var html='<tr>';
        html=html+'<td><input type="checkbox" class="ck" onclick="hj()"/></td>';
        html=html+'<td><input type="text" class="productName"/></td>';
        html=html+'<td><input type="text" class="price" onblur="getCountMoney(this)"/></td>';
        html=html+'<td><input type="button" value="-"><input ';
        html=html+'type="text" class="productSum"';
        html=html+'onblur="getCountMoney(this)"/><input type=';
        html=html+'"button" value="-"></td>';
        html=html+'<td><span class="countMoney"></span></td>';
        html=html+'<td onclick="delBtn(this)">刪除</td>';
        html=html+'</tr>';
        tr.innerHTML=html;
        tbody.appendChild(tr);
    }
    //刪除單行
    function delBtn(obj){
        var tr=obj.parentNode;
        tbody.removeChild(tr);
        hj();
    }
    //刪除選中行
    function delTrS(){
        var allck=document.getElementsByClassName("ck");
        var allc=new Array();
        for(var i=0;i<allck.length;i++){
            if(allck[i].checked){
                allc.push(allck[i].parentNode.parentNode);
            }
        }
        for(var j=0;j<allc.length;j++){
            tbody.removeChild(allc[j]);
        }
        hj();
    }
    //全選
    function checkAll(){    
        var qx=document.getElementById("quanxuan").checked;
        var ck=document.getElementsByClassName("ck");
        for(var i=0;i<ck.length;i++){
            if(qx){
                ck[i].checked=true;
            }else{
                ck[i].checked=false;
            }
        }
        hj();
    }
    //合計
    function hj(){
        var allc=document.getElementsByClassName("ck");
        var sum=0;
        for(var i=0;i<allc.length;i++){
            if(allc[i].checked){
                var tr=allc[i].parentNode.parentNode;
                var xj=tr.getElementsByClassName("countMoney")[0].innerHTML;
                sum=sum+Number(xj);
            }
        }
        document.getElementById("hj").innerHTML=sum;    
    }
 </script>
</HTML>