php - 在 jQuery 中更新 td 内容的更智能方法

Question

我目前正在运行一个 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);
    });
});

fiddle :http://jsfiddle.net/5KKrD/

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

问候

Answer 1

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

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

有了这个 - 您可以使用 jquery 轻松获取该值，例如:

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

DEMO