Question

我不是非常有经验的javascript开发人员，我无法弄清楚如何绑定每个表行中的输入。

我的表格有三列 - 开始，进度和保持。开始列包含时间估计的静态值，其他两列包含进度和剩余时间的输入。我需要绑定这些输入，以便在另一个输入改变时重新计算进度或保持输入，根据以下表达式： start = progress + retain 。

这是我到目前为止的地方..

jsfiddle

HTML：

<table class="stats">
    <thead>
        <td>estimation</td>
        <td>progress</td>
        <td>remain</td>
    </thead>
    <tbody>
        <tr>
            <td class="estimation">50</td>
            <td class="progress"><input type="number" value="20"/></td>
            <td class="remain"><input type="number" value="30"/></td>
        </tr>
        <tr>
            <td class="estimation">100</td>
            <td class="progress"><input type="number" value="10"/></td>
            <td class="remain"><input type="number" value="90"/></td>
        </tr>
            <tr>
            <td class="estimation">70</td>
            <td class="progress"><input type="number" value="20"/></td>
            <td class="remain"><input type="number" value="50"/></td>
        </tr>
    </tbody>
</table>

的javascript：

//array of rowClasses
var rows = [];

var rowClass = function(row){
    this.$row = $(row);
    this.$estimation = this.$row.find('.estimation');
    this.$progress = this.$row.find('.progress');
    this.$remain = this.$row.find('.remain');
};

//jquery collecion of table rows
var $rows = $("table.stats>tbody>tr");

//populate rows array with rowClasses
$rows.each(function(index){
    rows[rows.length] = new rowClass($rows[index]);
});

我不知道要包含jQuery .change（）函数，因此它引用了相关的行值。

Answer 1

添加min＆amp;作为值的输入字段的最大值应保持在范围内。

<tr>
    <td class="estimation">50</td>
    <td class="progress">
        <input type="number" value="20" min="0" max="50"/>
    </td>
    <td class="remain">
        <input type="number" value="30" min="0" max="50"/>
    </td>
</tr>

然后在您的javascript下面添加以下脚本，它将执行计算：

$("td.progress input, td.remain input").bind('keyup mouseup', function() {

    var tdEst = $(this).parent().parent().children()[0];

    if ($(this).parent().prop('class') == "progress") {
        var tdRem = $(this).parent().next('td.remain');
        var remValue = parseInt($(tdEst).html()) - parseInt($(this).val());
        $(tdRem).find('input').val(remValue);
    } else {
        var tdProg = $(this).parent().prev('td.progress');
        var remValue = parseInt($(tdEst).html()) - parseInt($(this).val());
        $(tdProg).find('input').val(remValue);
    }
});

DEMO

jQuery绑定表行输入

1 个答案: