点击获取<li>的值

我想实现的是这个功能：
例如<li>大葱 1元</li>
<li>西红柿 2元</li>
<li>白菜 3元</li>
<li>茄子 4元</li>通过点击 大葱 白菜之类的
然后在网页的其他地方 就会显示出  大葱  2份  1元  然后还能调节（+-）份数  动态显示总价格
白菜  1份  3元
     总价  5元求思路  最好能给个范例代码之类的  感激不尽

解决方案 »

  1.   

    <!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 price="2" code="2">西红柿 2元</li>
      <li price="3" code="3">白菜 3元</li>
      <li price="4" code="4">茄子 4元</li>
    </ul>
    <table id="order">
    <thead>
         <tr>
             <th>Item</th>
                <th>Unit Price</th>
                <th>Number</th>
    <th>Adjust</th>
            </tr>
        </thead>
        <tfoot>
         <tr>
             <td colspan="4">总价：<span>0</span>元</td>
            </tr>
        </tfoot>
        <tbody></tbody>
    </table>
    </body>
    </html>
      

  2.   

    在IE里行 但是在FF里就不行呢？ 
      

  3.   

    第30行代码，少写了一个参数，修改一下就可以了。还是FF最严格，我写完代码在IE、Chrome、Safari中测试过的
    //var newRow = oTbody.insertRow();
    var newRow = oTbody.insertRow(0);