javaScript动态表格

来源：互联网发布：谁在星密码开淘宝店铺编辑：程序博客网时间：2024/06/15 23:49

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

*{
text-align:center;
font-size:13px;
}
#myTable{
border:1px solid black;
border-collapse:collapse;
}
#myTable td,#myTable th{
border:1px solid black;
width:120px;
height:25px;
}
#myTable th{
background-color:#CCC;
color:black;

}
.odd{
background-color:#0FC;

}
.even{
background-color:#39C;
color:#FFF;
}
</style>
</head>

<body>
<table id="myTable" align="center">
<thead>
     <tr>
         <th>商品名称</th>
            <th>数量</th>
            <th>价格</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="t_body">
     <tr id="r_1">
         <td>java高级编程</td>
            <td>2</td>
            <td>80.00</td>
            <td>160.00</td>
            <td><button
            type="button" onclick="removeRow('r_1')">删除</button><button type="button" onclick="edit(this)">修改</button></td>
        </tr>
    </tbody>
    <tfoot>
     <tr>
         <td>总  计：</td>
            <td colspan="4" id="total"></td>
        </tr>
     <tr>
         <td colspan="5">
             <button type="button" onclick="addRow()">增加一行</button>
            </td>
        </tr>
    </tfoot>
</table>
</body>
<script language="javascript" type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
var count=2;
function addRow()
{
count++;
var t_body=$("t_body");
//var count=t_body.rows.length;
//var r=t_body.insertRow(count);
var tr=document.createElement("tr");//创建一个TR控件
tr.setAttribute("id","r_"+count);//让tr控件的id自增
var td_1=document.createElement("td");//创建一个td控件
td_1.innerHTML="sql高级编程";//给td的内容赋值
var td_2=document.createElement("td");
td_2.innerHTML="2";
//td_2.setAttribute("width","80");
var td_3=document.createElement("td");
td_3.innerHTML="50";
var td_4=document.createElement("td");
td_4.innerHTML="100";
var td_5=document.createElement("td");
//创建两个操作按钮
var btnDel=document.createElement("button");
btnDel.innerHTML="删除";
//添加删除事件
btnDel.setAttribute("onclick","removeRow('"+tr.getAttribute("id")+"')");
var btnEdit=document.createElement("button");
btnEdit.innerHTML="修改";
btnEdit.setAttribute("onclick","edit(this)");
//添加控件到指定容器由小到大
td_5.appendChild(btnDel);
td_5.appendChild(btnEdit);
//添加列到指定的行
tr.appendChild(td_1);
tr.appendChild(td_2);
tr.appendChild(td_3);
tr.appendChild(td_4);
tr.appendChild(td_5);
//添加行到表格
t_body.appendChild(tr);
init();
}
function removeRow(id)
{
var r=$(id);
//获取当前行在整个表格中的下标
var index=r.rowIndex;
$("myTable").deleteRow(index);
init();
}
function edit(obj)
{
//修改按钮显示的值
obj.innerHTML="确定";
//获取当前按钮的父节点的父节点
var tr=obj.parentNode.parentNode;
//alert(tr.getAttribute("id"));
//获取第二个单元格的对象
var td=tr.cells[1];

var sum=td.innerHTML;
td.innerHTML="";
//创建一个input控件
var text=document.createElement("input");
//设置控件的类型
text.setAttribute("type","text");
//给文本框赋初始值，把单元格中的值
text.setAttribute("value",sum);
//alert(tr.getAttribute("class"));

var id="t_"+tr.getAttribute(id);
//设置文本框的id
text.setAttribute("id",id);
//添加文本框到单元格
td.appendChild(text);
//给按钮重新设置事件
obj.setAttribute("onclick","update(this,'"+id+"')");
//注意：要给控件添加样式必须在添加到容器以后
text.focus();
text.select();
text.setAttribute("style","border:0px;width:80px;");
//使用所在行的样式设置文本框的样式
text.className=tr.getAttribute("class");
}

//obj 表示按钮本身
//id 表示要操作的文本框的id
function update(obj,id)
{
obj.innerHTML="修改";
obj.setAttribute("onclick","edit(this)");
//根据ID获取文本框对象
var text=$(id);
//获取文本框输入的值
var sum=text.value;
//获取文本框所在的父容器
var td=text.parentNode;
td.innerHTML=sum;
//获取td所在行的对象
var tr=td.parentNode;
var price=tr.cells[2].innerHTML;
tr.cells[3].innerHTML=parseFloat(price)*parseInt(sum);
init();
}
//隔行变色
//页面加载的时候获取总价
function init()
{
//获取tbody的对象
var t_body=$("t_body");
//获取行的数组
var rows=t_body.rows;
var sum=0;
//循环遍历获取指定列的值
for(var i=0;i<rows.length;i++)
{
   var price=rows[i].cells[3].innerHTML;
   sum+=parseFloat(price);
   //根据奇偶性设置背景颜色
   if(i%2==1)
   {
    rows[i].setAttribute("class","odd");
   }else{
    rows[i].setAttribute("class","even");
   }
}
$('total').innerHTML=sum;
//各行变色;
}
window.onload=init;
</script>
</html>