table动态增加删除
程序员文章站
2024-01-13 20:22:34
基于网上代码修改实现动态添加表数据行 ......
基于网上代码修改实现动态添加表数据行
<!DOCTYPE html>
<html lang="cn">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}
.hide{
display:none;
}
.dialog-tip{
width:300px;
height:200px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<table id="jsTrolley">
<thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
<tbody>
<tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
</tbody>
<tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>
<button onclick="dialog()">添加</button>
<div id="dialogId" class="hide" style=" width:300px;height:200px;border:1px solid #3d444c;margin-left:40%">
<input type="text" name="name" class="one"/>
<input type="text" name="price" class="two"/>
<button onclick="save()">确定</button>
<button onclick="cancel()">取消</button>
</div>
<script type="text/javascript">
var tip = document.getElementById("dialogId");
var dialog = function(){
tip.className = "";
};
// var sum = 60.70;
var items = {};
var save = function(){
var itemObj = {};
itemObj.name = document.getElementsByClassName("one")[0].value;
itemObj.price = parseInt(document.getElementsByClassName("two")[0].value);
items = itemObj;
add(items);
items = {};
tip.className = "hide";
}
var cancel = function(){
tip.className = "hide";
}
//闭包实现局部变量保存在内存中
function a(d){
var sum = 60.70;
if(!d.length){
function c(d){
if(d && !d.length){
sum = sum + d.price;
}
else return sum;
return sum;
};
}
return c;
};
var sumary = a(items);
function add(items) {
var add = document.createElement("tr");
var src = document.getElementsByTagName("tbody");
add.innerHTML = "<td>"+items.name+"</td><td>"+items.price+"</td><td><a href='javascript:void(0);'>删除</a></td>";
src[0].appendChild(add);
var tableObj = document.getElementById("jsTrolley");
var num = tableObj.rows.length -2;
var len = tableObj.rows.length;
// sum+=items.price;
// tableObj.rows[len-1].cells[1].innerText =sum.toFixed(2)+"("+num+"件商品)";
tableObj.rows[len-1].cells[1].innerText =sumary(items).toFixed(2)+"("+num+"件商品)";
bind();
}
function bind() {
var arr = document.getElementsByTagName("a");
var src = document.getElementsByTagName("tbody");
s = src[0];
var len = arr.length;
for(var i =0 ;i<len ;i++)
{
arr[i].setAttribute("onclick","foo(s,this)");
}
}
function foo(x,y){
var sum = sumary();
var tar = y.parentNode.parentNode;
x.removeChild(tar);
var v = y.parentNode.previousSibling.innerHTML;
sum -=v;
var tableObj = document.getElementById("jsTrolley");
var num = tableObj.rows.length -2;
tableObj.rows[tableObj.rows.length-1].cells[1].innerText = sum.toFixed(2)+"("+num+"件商品)";
}
bind();
function show(){
var tableRowInfo ="";
tableObj = document.getElementById("jsTrolley");
for(var i =0 ;i<tableObj.rows.length ; i++){
for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){
tableRowInfo += tableObj.rows[i].cells[j].innerText + " ";
}
console.log(tableRowInfo); // 打印每行信息
tableRowInfo ="";
}
}
show();
</script>
</body>
</html>