购物车加减代码改进问题

恩这是买了一本书时购物车的网页源文件代码！是这个吗？不是的话我把web项目和数据库一块发给你（要不是回复发不了文件早就把整个项目给你了）需要的话我想通过QQ把项目和数据库一块压缩发给你（小弟在此先谢了）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.numa{
display:inline-block;
width:15px;
height:15px;
border:1px solid #999;
text-align:center;
text-decoration:none;
color:#000;
cursor:hand;
}
</style>
<script type="text/javascript">
function jian(txt,span)
{
var num=parseInt(txt.value);
num--;
if(num==0)
{
num=1;
}
txt.value=num;
var danjia=document.getElementById("danjia").innerHTML;
span.innerHTML=num*danjia;
showzj();
}

function jia(txt,span)
{
var num=parseInt(txt.value);
num++;
txt.value=num;
var danjia=document.getElementById("danjia").innerHTML;
span.innerHTML=num*danjia;
showzj();
}

function showzj()//计算总价
{
var zj=0.0;
var i=1;
while(true)
{
var span=document.getElementById("spannum"+i);
if(span==null)
{
break;
}
zj+=parseFloat(span.innerHTML);

i++;

}
document.getElementById("spanzj").innerHTML=zj;
}
</script>
</head>
  <body>


     <table border="1">
     <tr>
     <td>序号</td>
     <td>图片</td>
     <td>书名</td>
     <td>单价</td>
     <td>数量</td>
     <td>合计</td>
     </tr>
     <tr>
<td>1</td>
<td><img src='BookCovers/9787115134165.jpg' width='60px'/></td>
<td>C++Primer Plus（第五版）中文版</td>
<td id='danjia'>72.0000</td>
<td>
<a class='numa'  onclick='jian(num=1,spannum=1)'>-</a>
<input id='(num=1)'  style='width:30px' value='1' />
<a class='numa' onclick='jia(num=1,spannum=1)'>+</a>
</td>
<td id='(spannum=1)'>72.0</td>
<td><a href='deletecart.jsp?id=4945'>删除</a></td>
</tr>

     <tr>
     <td colspan="7" align="right" id="spanzj">总金额：72.0</td>
     </tr>
     </table>


     <p>
     <form action="buy.jsp" method="post">
     <input type="hidden" name="zj" id="d" value="72.0"/>
     <input type="submit" value="结算" />
     </form>
     </p>

     <p><a href="index3.jsp">继续购物</a></p>
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style type="text/css">
    .numa{
      display:inline-block;
      width:15px;
      height:15px;
      border:1px solid #999;
      text-align:center;
      text-decoration:none;
      color:#000;
      cursor:hand;
    }
  </style>
  <script type="text/javascript">
    function jian(obj)
    {       var num=parseInt(get_nextsibling(obj).value);
      num--;
      if(num==0)
      {
        num=1;
      }
      get_nextsibling(obj).value=num;
      var danjia=get_previoussibling(obj.parentNode).innerHTML;

      get_nextsibling(obj.parentNode).innerHTML= num*danjia;
      showzj();
    }    function jia(obj)
    {
      var num=parseInt(get_previoussibling(obj).value);
      console.log(obj.previousSibling)
      num++;
      get_previoussibling(obj).value=num;
      var danjia=get_previoussibling(obj.parentNode).innerHTML;
      get_nextsibling(obj.parentNode).innerHTML=num*danjia;
      showzj();
    }
    function get_nextsibling(n)
{
  var x=n.nextSibling;
  if(x == null) return null;
  while (x && x.nodeType!=1)
   {
     x=x.nextSibling;
   }
  return x;
}
    function get_previoussibling(n)
{
  var x=n.previousSibling;
  if(x == null) return null;
  while (x && x.nodeType!=1)
  {
    x=x.previousSibling;
  }
  return x;
}
function showzj()//计算总价
{
  var zj=0.0;
  var i=1;
  while(true)
  {
    var span=document.getElementById("spannum"+i);
    if(span==null)
    {
      break;
    }
    zj+=parseFloat(span.innerHTML);    i++;  }
  document.getElementById("spanzj").innerHTML=zj;
}
</script>
</head>
<body>
  <table border="1">
   <tr>
     <td>序号</td>
     <td>图片</td>
     <td>书名</td>
     <td>单价</td>
     <td>数量</td>
     <td>合计</td>
   </tr>
   <tr>
    <td>1</td>
    <td><img src='BookCovers/9787115134165.jpg' width='60px'/></td>
    <td>C++Primer Plus（第五版）中文版</td>
    <td id='danjia'>72.0000</td>
    <td>
      <a class='numa'  onclick='jian(this)'>-</a>
      <input id='(num=1)'  style='width:30px' value='1' />
      <a class='numa' onclick='jia(this)'>+</a>
    </td>
    <td id='spannum1' class="spannum">72.0</td>
    <td><a href='deletecart.jsp?id=4945'>删除</a></td>
  </tr>
  <tr>
    <td>1</td>
    <td><img src='BookCovers/9787115134165.jpg' width='60px'/></td>
    <td>C++Primer Plus（第五版）中文版</td>
    <td id='danjia'>72.0000</td>
    <td>
      <a class='numa'  onclick='jian(this)'>-</a>
      <input id='(num=1)'  style='width:30px' value='1' />
      <a class='numa' onclick='jia(this)'>+</a>
    </td>
    <td id='spannum2' class="spannum">72.0</td>
    <td><a href='deletecart.jsp?id=4945'>删除</a></td>
  </tr>  <tr>
   <td colspan="7" align="right">总金额：<span id="spanzj"></span></td>
   </tr>
</table>
<p>
<form action="buy.jsp" method="post">
   <input type="hidden" name="zj" id="d" value="72.0"/>
   <input type="submit" value="结算" />
</form>
</p><p><a href="index3.jsp">继续购物</a></p>
</body>
</html>

谢了成功运行不过你写的我很多地方不明白麻烦你注释一下呵呵（比如 jian(num=1,spannum=1)里面的两个参数杂用obj代替，不用obj时可以吗）其他的我大体明白（两个得到单价和单本合计的方法然后利用方法改变要改变的值呵呵不过里面的代码具体意思不明白你细说（注释）一下吧）在此谢过！

因为<a class='numa'  onclick='jian(this)'>-</a> 标签里面的jian方法的参数是this（this在这里是表示这个对象的意思也就是这个a标签是这个规定的问我为什么我也不知道）方法的function jia(obj)参数obj这个值可以去其他的任何字母我用obj只是可以清楚的表示这是个对象参数
function jia(obj)
    {
      var num=parseInt(get_previoussibling(obj).value);//get_nextsibling(n)表示获取当前标签的上一个同级相邻标签，在这里表示<input id='(num=1)'  style='width:30px' value='1' />这个标签这里是获取<input id='(num=1)'  style='width:30px' value='1' />的值
      console.log(obj.previousSibling)
      num++;//点击一次这个值加1
      get_previoussibling(obj).value=num;//然后把加1的值返回赋值回去
      var danjia=get_previoussibling(obj.parentNode).innerHTML;//obj.parentNode表示父亲节点也就是<td>，然后找这个td上一个同级相邻标签，在这里指的是<td id='danjia'>72.0000</td>获取其单机值
      get_nextsibling(obj.parentNode).innerHTML=num*danjia;//get_nextsibling(n)表示获取n标签的下一个同级相邻标签这里是obj的父标签td的下一个同级相邻的标签<td id='spannum1' class="spannum">72.0</td> 将运算的值赋值给他
      showzj();//计算总和 jian也是如此
    }

恩明白了不过得到同级的下一个或上一个标签方法时那个if到return的过程理解不透虽然知道干嘛的意思不太明白呵呵这是最后不懂得地方了还得麻烦你说下 Thankyou

这是浏览器兼容的问题 IE是不需要判断的但是在其他浏览器会存在兼容性的问题 previousSibling在其他浏览器会返回一个空的textContent标签就这个判断是为了取得这个空的标签从而得到有效的标签

调试易

购物车加减代码改进问题

解决方案 »