2

我目前正在运行一个有效的 html 和 jQuery 代码，但对我来说看起来很丑。我真的很感谢建议更聪明地做到这一点。

目标：使用输入字段更新 php 生成的表格的单元格。每个单元格包含一个基本值，该值应乘以输入。

目前，我读取输入的值，从隐藏输入中获取每个单元格的基本值并重写每个单元格的整个 html（隐藏输入 + 更新数据）。

html代码：

<table id='tbl'>
    <thead>
        <tr>
            <th colspan="2">Quantity:
                <input type="text" id="quantity" name="quantity" value="1">
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input name="1_1" type="hidden" value="11"><span>11</span>
            </td>
            <td>
                <input name="1_2" type="hidden" value="12"><span>12</span>
            </td>
        </tr>
        <tr>
            <td>
                <input name="2_1" type="hidden" value="21">21
            </td>
            <td>
                <input name="2_2" type="hidden" value="22">22
            </td>
        </tr>
        <tr>
            <td>
                <input name="3_1" type="hidden" value="31">31
           </td>
            <td>
                <input name="2_2" type="hidden" value="32">32
           </td>
        </tr>
    </tbody>
</table>

脚本：

$('#quantity').keyup(function () {
    var quantity = parseFloat($(this).val());
    if (quantity == "" || isNaN(quantity))
        quantity = 1;
    $('#tbl tbody tr td').map(function () {
        var $row = $(this);
        var $refvalue = $row.find(':input[type=hidden]').val();
        var $refname = $row.find(':input[type=hidden]').attr('name');
        $row.html('<input name="' + $refname + '" type="hidden" value="' + $refvalue + '">' + $refvalue * quantity);
    });
});

小提琴：http: //jsfiddle.net/5KKrD/

有更好的方法吗？我可以同时更改表格、js 等。

问候

4

5 回答 5

2

这是我的方法 - 使用data属性（而不是隐藏输入）来传递乘数，例如：

<td class="cell" data-value="11">11</td>

有了这个 - 你可以很容易地使用 jquery 来获取值，例如：

$('.cell').data('value')

演示

于 2013-07-25T09:49:44.320 回答
1

我已经稍微完善了你的代码，它工作顺利

JS代码：

$('#quantity').keyup(function () {
if ($(this).val()) {
    var quantity = parseInt($(this).val());
    if (quantity == "" || isNaN(quantity)) quantity = 1;
    $('#tbl tbody tr td input').each(function () {
        var row = $(this);
        var mulVal = row.val() * quantity;
        $(this).attr('value', mulVal);
        $(this).parent().find('span').text(mulVal);
        //var $refvalue  = $row.find(':input[type=hidden]').val();
        //var $refname = $row.find(':input[type=hidden]').attr( 'name' );
        //$row.html( '<input name="'+ $refname +'" type="hidden" value="'+ $refvalue + '">' + $refvalue * quantity );

    });
}
});

HTML 代码：

<table id='tbl'>
<thead>
    <tr>
        <th colspan="2">Quantity:
            <input type="text" id="quantity" name="quantity" value="1">
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input name="1_1" type="hidden" value="11" /><span>11</span>

        </td>
        <td>
            <input name="1_2" type="hidden" value="12" /><span>12</span>

        </td>
    </tr>
    <tr>
        <td>
            <input name="2_1" type="hidden" value="21" /><span>21</span>
        </td>
        <td>
            <input name="2_2" type="hidden" value="22" /><span>22</span>
        </td>
    </tr>
    <tr>
        <td>
            <input name="3_1" type="hidden" value="31" /><span>31</span>
        </td>
        <td>
            <input name="2_2" type="hidden" value="32" /><span>32</span>
        </td>
    </tr>
</tbody>
</table>

现场演示

快乐编码:)

于 2013-07-25T10:29:06.113 回答
0

对于您的需求来说，这可能有点过头了，但这就是backbone.js 的目标——从HTML DOM 中删除数据，而是将其处理为模型和视图。

http://backbonejs.org/#examples

除此之外，你目前的方法有什么问题——你具体想改进什么？

于 2013-07-25T09:41:15.253 回答
0

代码清理了一下：

$('#quantity').keyup(function() {
    var quantity = parseFloat($(this).val());
    quantity = ( quantity == ""  || isNaN( quantity ) ? 1 : quantity;

    $('#tbl tbody tr td').map(function() {
        var $hiddenElement = $(this).find(input[type='hidden']);
        $(this).html( '<input name="'+ $(hiddenElement).attr('name') +'" type="hidden" value="'+ $(hiddenElement).val() + '">' +   (parseFloat($(hiddenElement).val()) * quantity) );
   });
});
于 2013-07-25T09:43:01.577 回答
0

我认为你的很好，我个人唯一要做的改进就是将 html 放在 var 中并将其用作模板以保持语法更简洁，我会替换它

  $row.html( '<input name="'+ $refname +'" type="hidden" value="'+ $refvalue + '">' + $refvalue * quantity );

有了这个

var template ='<input name="{name}" type="hidden" value="{refvalue}">{res}</a>';

然后

$row.html(template.replace('{name}', $refname) ); // and so on
于 2013-07-25T09:45:33.437 回答