html输入商品数量，得不到总价

代码改成这样，还是有问题，不知道问题在哪，请指教
  {foreach from=$goods_data item=goods name=goodsit}
   <tr>
    <td >{$goods.name}</td>
    <td >{$goods.price}</td>
    <td><input type="text" onBlur ="document.getElementsByName(unitprice)[{$goods.id}].value=parseFloat(this.value)*{$goods.price};totalprices.value=total*({$goods.id});"/><</td>
    <td><input  name="unitprice" type="text" readonly="1" style="width:60px;"></td>
   </tr>
    {/foreach}
   <tr>
    <td colspan="3">合计：</td>
    <td><input name="totalprices" id="totalprices" type="text" readonly="1" style="width: 60px;"></td>
  </tr> 代码结果为
其中<script type="text/javascript">
   function total( {$goods.id})
   {
    var x=0;
    x+=document.getElementsByName(unitprice)[{$goods.id}].value;
    return x;
   }
</script>

这个$goods.id是从0开始顺序递增吗?
document.getElementsByName(unitprice)[{$goods.id}]这是索引第$goods.id个unitprice元素, 如果$goods.id = 10000那怎么办?所以
<input type="text" id="input_{$goods.id}" onBlur ="document.getElementsByName(unitprice)[{$goods.id}].value=parseFloat(this.value)*{$goods.price};totalprices.value=total*({$goods.id});"/><</td>
<td><input id="unitprice_{$goods.id}" name="unitprice" type="text" readonly="1" style="width:60px;"></td>然后 function total(id){
document.getElementById("unitPrice_" + id).value;
}

$goods.id是从0开始,依次增大，唯一但并不连续。不过还是得不到结果，上面的图传错了，因为连续回复三次修改不了，谢谢wz_307，得出的图片一样，并不能得到想要的数据

  <tr>
    <td align="center"  valign="middle">品名</td>
    <td align="center"  valign="middle">价格(元)</td>
    <td align="center"  valign="middle">数量</td>
    <td align="center"  valign="middle">总价(元)</td>
   </tr>
  {foreach from=$goods_data item=goods name=goodsit}
   <tr>
    <td >{$goods.name}</td>
    <td  align="center"  valign="middle">parseFloat({$goods.price})</td>
    <td ><input type="text" id="input_{$goods.id}"  style="width:58px;" onBlur ="document.getElementsByName(unitprice)[{$goods_id}].value=parseFloat(this.value)*parseFloat({$goods.price});totalprices.value+=total({$goods_id});"/></td>
    <td><input id="unitprice_{$goods_id}"  name="unitprice" type="text" readonly="1" style="width:62px;"></td>
   </tr>
    {/foreach}
   <tr>
    <td colspan="3">合计：</td>
    <td><input name="totalprices" id="totalprices" type="text" readonly="1" style="width: 60px;"></td>
  </tr>
还是输入数量，得不到总价和总计，请帮我看一看，万分感谢！

能完成这个简单的功能，首先我罗列一下这个里边涉及的技术点：
包括了js作用域问题( num[i].index = i;)，正则，Math方法的使用（数值精度过长，四舍五入处理，这块需要在商榷），以及代码的有效剥离成方法，以及简单的getByClass编程的实现。
要实现这样的一个东西，简单的一行代码是搞不定的，首先要从思想上来重视他，js不是那么简单一门语言，需要额外的精力来学习他。我这里边全是js原生实现，如果jq的话，估计也好不到那儿去，有兴趣的同学可以试一下。
能力有限，仅在我知识范围内做以解答，仅供参考：<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table id="tab">
    <tr>
        <td align="center"  valign="middle">品名</td>
        <td align="center"  valign="middle">价格(元)</td>
        <td align="center"  valign="middle">数量</td>
        <td align="center"  valign="middle">总价(元)</td>
    </tr>
    <tr>
        <td >青菜</td>
        <td  align="center"  class="unit" valign="middle">2</td>
        <td ><input type="text" class="num" id="input_{$goods.id}"  style="width:58px;"/></td>
        <td><input id="unitprice_{$goods_id}" class="price"  name="unitprice" type="text" readonly="1" style="width:62px;"></td>
    </tr>
    <tr>
        <td >青菜2</td>
        <td align="center"  valign="middle" class="unit">2</td>
        <td ><input type="text" class="num" id="input_{$goods.id}"  style="width:58px;"/></td>
        <td><input id="unitprice_{$goods_id}" class="price"  name="unitprice" type="text" readonly="1" style="width:62px;"></td>
    </tr>
    <tr>
        <td >青菜3</td>
        <td  align="center"  valign="middle" class="unit">2</td>
        <td ><input type="text" class="num" id="input_{$goods.id}"  style="width:58px;"/></td>
        <td><input id="unitprice_{$goods_id}" class="price"  name="unitprice" type="text" readonly="1" style="width:62px;"></td>
    </tr>
    <tr>
        <td colspan="3">合计：</td>
        <td><input name="totalprices" id="totalprices" type="text" readonly="1" style="width: 60px;"></td>
    </tr>
</table>
<script>
    var tab = document.getElementById('tab');
    var total = document.getElementById('totalprices');
    var unit = getByClass('unit', tab);
    var num = getByClass('num', tab);
    var price = getByClass('price', tab);    for(var i = 0; i < num.length; i++){
        num[i].index = i;
        num[i].onblur = function(){
            var n_val = parseFloat(this.value);
            if(isNaN(n_val)){
                alert('请输入正确的数字!');
            }
            price[this.index].value = parseFloat(this.value) * parseFloat(unit[this.index].innerHTML);
            total.value = getPrice(price);
        }
    }    function getPrice(obj){
        var res = 0;
        for(var i = 0; i < obj.length; i++){
            if(obj[i].value.length > 0){
                res += parseFloat(obj[i].value);
            }
        }
        return Math.round(res);
    }    function getByClass(cls, parent){
        var res = [], parent = parent || document;
        if(document.getElementsByClassName){
            res = parent.getElementsByClassName(cls);
        } else {
            var all = parent.all;
            var reg = new RegExp('(\\s+|^)' + cls + '(\\s+|$)');
            for(var i = 0; i < all.length; i++){
                if(reg.test(all[i].className)){
                    res.push(all[i]);
                }
            }
        }
        return res;
    }
</script>
</body>
</html>

调试易

html输入商品数量，得不到总价

解决方案 »