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

问题描述：

图片说明

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

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

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

答

一次性多发点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>

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

相关推荐