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>