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