点击获取<li>的值解决思路-JavaSript-爱易网页

点击获取<li>的值解决思路

日期：2014-05-16　浏览次数：20379 次

点击获取<li>的值
我想实现的是这个功能：
例如

<li>大葱 1元</li>
<li>西红柿 2元</li>
<li>白菜 3元</li>
<li>茄子 4元</li>

通过点击大葱白菜之类的

然后在网页的其他地方就会显示出

大葱 2份 1元然后还能调节（+-）份数动态显示总价格
白菜 1份 3元
总价 5元

求思路最好能给个范例代码之类的感激不尽

------解决方案--------------------

HTML code

<!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">
table {
    border-collapse:collapse;
}
td, th {
    border:1px solid #CCC;
    padding:5px;
}
tfoot td {
    text-align:right;
}
</style>
<script type="text/javascript">
function $(_id) { return document.getElementById(_id); }
window.onload = function() {
    var obj = $('menu').getElementsByTagName('li');
    for (var i = 0; i < obj.length; i ++) {
        obj[i].onclick = function() {
            //检查表格中是否已存在当前点击的菜品的记录
            var o = $("order").getElementsByTagName('tbody')[0].getElementsByTagName('td');
            for (var j = 0; j < o.length; j ++) if (o[j].getAttribute('code') == this.getAttribute('code')) return false;
            
            //向tbody添加记录
            var oTbody = $("order").getElementsByTagName('tbody')[0];
            var newRow = oTbody.insertRow();
            
            var cell_1 = newRow.insertCell(0);
            cell_1.setAttribute('code', this.getAttribute('code'));
            cell_1.innerHTML = this.innerHTML;
            
            var cell_2 = newRow.insertCell(1);
            cell_2.setAttribute('price', this.getAttribute('price'));
            cell_2.innerHTML = this.getAttribute('price') + '元';
            
            var cell_3 = newRow.insertCell(2);
            cell_3.innerHTML = '1';
            
            var cell_4 = newRow.insertCell(3);
            cell_4.innerHTML = '<input type="button" class="increase" value="+" /><input type="button" class="decrease" value="-" />';
            
            //计算总价
            calcTotalPrice();
            
            //绑定按钮事件
            var oButton = $("order").getElementsByTagName('input');
            for (var k = 0; k < oButton.length; k ++) {
                if (oButton[k].className == 'increase') oButton[k].onclick = increase;
                else if (oButton[k].className == 'decrease') oButton[k].onclick = decrease;
            }
        }
    }
}

function calcTotalPrice() {
    var obj = $("order").getElementsByTagName('tbody')[0].getElementsByTagName('tr'), sum = 0;
    for (var i = 0; i < obj.length; i ++) {
        var o = obj[i].getElementsByTagName('td');
        sum += parseInt(o[1].getAttribute('price')) * parseInt(o[2].innerHTML);
    }
    $("order").getElementsByTagName('tfoot')[0].getElementsByTagName('td')[0].getElementsByTagName('span')[0].innerHTML = sum;
}

function increase() {
    var oNumber = this.parentNode.parentNode.getElementsByTagName('td')[2];
    oNumber.innerHTML = parseInt(oNumber.innerHTML) + 1;
    calcTotalPrice();
}

function decrease() {
    var oNumber = this.parentNode.parentNode.getElementsByTagName('td')[2];
    
    //只有一份时点击减少按钮，删除该行记录
    if (parseInt(oNumber.innerHTML) == 1) $("order").deleteRow(this.parentNode.parentNode.rowIndex);
    else oNumber.innerHTML = parseInt(oNumber.innerHTML) - 1;
    
    calcTotalPrice();
}
</script>
</head>

<body>
<ul id="menu">
  <li price="1" code="1">大葱 1元</li>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

点击获取<li>的值解决思路

相关资料更多>

推荐阅读更多>