比价类的实现问题！！！！！！！

Question

如如片一样 下面的那个计算结果 是上面输入 数量 价格 和名称后点击添加 下面就会出现这一行

那个 序号是 添加一个 为1 再次添加为2就逐渐+1
名称就是 上面所写的那个名称是什么下面就是什么
单价格 同名称一样
数量 也是同名称一样
总价格 是 数量*价格 等到的数
排序 是 比如说 添加了三个 同学 总价格 是500 800 600 这三样 那么就是以 从低到高排序 要用 1 2 3 来表示排序
建议 是根据 那个排序来所弄 最低的 写上价格较低 最高 的写上 价格娇贵 其他不用

操作 就是添加个 删除 与编辑的按钮 可以删除 也可以从新编辑 名称 单价 跟数量 当这一行的 这三个 改变了 那么总价格 排序 跟建议 也要改变 同上锁说的一样
下面贴代码

Answer 1

一次性多发点c喂。。。。

 <form>
    价格：<input type="text" class="price" />元<br />
    数量：<input type="text" class="num" /><br />
    名称：<input type="text" class="name" /><br />
    <input type="button" value="添加" onclick="addTR(this,true)" />
</form>
<br />
    计算结果<hr />
<table border="1">
    <tr align="center"><td>序号</td><td>名称</td><td>单价</td><td>数量</td><td>总价格</td><td>排序</td><td>建议</td><td>操作</td></tr>
    <tbody id="tbRst"></tbody>
</table>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    var rx = /^\d+(\.\d+)?$/, rxInt = /^\d+$/,tbRst=$('#tbRst');
    function validate(ipts) {
        var ipt = ipts.filter('.price');
        if (!rx.test(ipt.val())) { alert('单价为数字！'); ipt.select(); return false }
        ipt = ipts.filter('.num');
        if (!rxInt.test(ipt.val())) { alert('数量为数字！'); ipt.select(); return false }
        return true
    }
    function delRow(btn) {
        if (confirm('确认删除？！')) {
            $(btn).closest('tr').nextAll().each(function () { this.cells[0].innerHTML =parseInt( this.cells[0].innerHTML) - 1;});
            $(btn).closest('tr').remove();
            updateSortADV();
        }
    }
    function updateSortADV() {
        var arrTds = tbRst.find('tr td:nth-child(5)'), arrMoney = arrTds.map(function () { return { index: this.parentNode.rowIndex, v: parseInt(this.innerHTML) } }).get();
        arrMoney.sort(function (a, b) { return a.v - b.v });
        var l = arrMoney.length, h = l - 1;
        for (var i = 0; i < l; i++) {
            arrTds.eq(arrMoney[i].index - 1).next().html(i + 1).next().html(i == 0 ? '价格较低' : i == h ? '价格较贵' : '')
        }
    }
    function addTR(btn) {
        var input = $(btn).closest('form').find(':text');
        if (validate(input)) {
            $('#tbRst').append('<tr align="center"><td>' + (tbRst.find('tr').length + 1) + '</td><td>' + input.filter('.name').val() + '</td><td>' + input.filter('.price').val()
                + '</td><td>' + input.filter('.num').val() + '</td><td>'
                + (parseFloat(input.filter('.price').val()) * parseInt(input.filter('.num').val())).toFixed(2) + '</td><td></td><td></td><td><input type="button" value="编辑" onclick="editUpdate(this)"/>　<input type="button" value="删除" onclick="delRow(this)"/></td></tr>');
            btn.form.reset();
            updateSortADV();
        }
    }
    function editUpdate(btn) {
        var tds = $(btn).closest('tr').find('td'), edit = btn.value == '编辑';
        if (!edit) {
            if (!validate(tds.find('input'))) return;

            tds.eq(4).html((parseFloat(tds.eq(2).find('input').val()) * parseFloat(tds.eq(3).find('input').val())).toFixed(2));
        }

        tds.eq(1).html(edit ? '<input type="text" class="name" value="' + tds.eq(1).text() + '"/>' : tds.eq(1).find('input').val())
        tds.eq(2).html(edit ? '<input type="text" class="price" value="' + tds.eq(2).text() + '"/>' : tds.eq(2).find('input').val())
        tds.eq(3).html(edit ? '<input type="text" class="num" value="' + tds.eq(3).text() + '"/>' : tds.eq(3).find('input').val())
        btn.value = edit ? '更新' : '编辑';
        updateSortADV();
    }
</script>