Javascript_Table_DOM

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript">
 function oprates(btn){
  if(btn.firstChild.nodeValue=="修改"){
   btn.firstChild.nodeValue="保存";
   btn.nextSibling.firstChild.nodeValue="取消";
   btn.parentNode.previousSibling.firstChild.style.display='none';
   btn.parentNode.previousSibling.lastChild.style.display='block';
   var previousSiblingTR = btn.parentNode.parentNode.previousSibling;
   while(previousSiblingTR!=null){
    if(previousSiblingTR.lastChild.firstChild.nodeValue!="操作"){
     if

(previousSiblingTR.lastChild.lastChild.firstChild.nodeValue=="取消"){
      oprates(previousSiblingTR.lastChild.lastChild);
     }
    }
    previousSiblingTR=previousSiblingTR.previousSibling;
   }
   var nextSiblingTR = btn.parentNode.parentNode.nextSibling;
   while(nextSiblingTR!=null){
    if(nextSiblingTR.lastChild.lastChild.firstChild.nodeValue=="取

消"){
     oprates(nextSiblingTR.lastChild.lastChild);
    }
    nextSiblingTR = nextSiblingTR.nextSibling;
   }
   return;
  }
  if(btn.firstChild.nodeValue=="删除"){
   btn.parentNode.parentNode.removeNode(true);
   return;
  }
  if(btn.firstChild.nodeValue=="保存"){
   btn.firstChild.nodeValue="修改";
   btn.nextSibling.firstChild.nodeValue="删除";
   btn.parentNode.previousSibling.firstChild.style.display="block";
   btn.parentNode.previousSibling.lastChild.style.display="none";
   

btn.parentNode.previousSibling.firstChild.firstChild.nodeValue=btn.parentNode.previousSibling.last

Child.value;
   return;
  }
  if(btn.firstChild.nodeValue=="取消"){
   btn.previousSibling.firstChild.nodeValue="修改";
   btn.firstChild.nodeValue="删除";
   btn.parentNode.previousSibling.firstChild.style.display="block";
   btn.parentNode.previousSibling.lastChild.style.display="none";
   

btn.parentNode.previousSibling.lastChild.value=btn.parentNode.previousSibling.firstChild.firstChil

d.nodeValue;
   return;
  }
 }
</script>
<style>
 input{
  border:solid 1px #00F;
 }
 tr{
  height:30px;
 }
 td{
  text-align:center;
 }
</style>
<body>
<h3 align="center">我的购物车</h3>
<form>
<table border="1" width="360px" cellpadding="0" cellspacing="0" id="goods_tb" align="center">
 <tr>
     <th width="80px">商品</th>
        <th width="60px">价格</th>
        <th width="140px">数量</th>
        <th width="80px">操作</th>
    </tr>
    <tr>
     <td>数学</td>
        <td>40</td>
        <td><span>1</span><input type="text" style="display:none" value="1" /></td>
        <td><a href="#" onClick="oprates(this)">修改</a><a href="#" onClick="oprates(this)">删除

</a></td>
    </tr>
    <tr>
     <td>English</td>
        <td>35</td>
        <td><span>3</span><input type="text" style="display:none" value="3" /></td>
        <td><a href="#" onClick="oprates(this)">修改</a><a href="#" onClick="oprates(this)">删除

</a></td>
    </tr>
</table>
</span>
</body>
</html>