Question

首先执行正常的无错锁定。我想再次添加行压力锁定。哪里可能有错误？如果你看一下这个例子，我会很高兴的。添加行＆gt;不起作用demo

HTML

<table class="color"  cellpadding="2" cellspacing="2" id="myTable">
<tr>
     <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Lock/Unlock</td>
    <td>Lock/Unlock</td>
    <td>Lock/Unlock</td>
</tr>


<tr class="row">
    <td>1</td>
    <td>
        <select name="select" id="selecta">
            <option value="0"></option>
            <option value="1" selected>Lock</option>
            <option value="2">Unlock</option>
        </select>
    </td>

    <td>
        <input name="textfield" type="text" class="textfield" value="1" />
    </td>
    <td>
        <input name="textfield" type="text" class="textfield" value="1" />
    </td>
    <td>
        <input name="textfield" type="text" class="textfield" value="1" />
    </td>
</tr>
<tr class="row">
    <td>1</td>
    <td>
        <select name="select" id="selecta">
            <option value="0"></option>
            <option value="1" selected>Lock</option>
            <option value="2">Unlock</option>
        </select>
    </td>

    <td>
        <input name="textfield" type="text" class="textfield" value="1" />
    </td>
    <td>
        <input name="textfield" type="text" class="textfield" value="1" />
    </td>
    <td>
        <input name="textfield" type="text" class="textfield" value="1" />
    </td>
</tr>

   <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Rows" />
            </td>
        </tr>

    </tfoot>
</table>

JS

$(document).ready(function () {
    $('.row').each(function () {
        var $dropdown = $(this).find('#selecta'),
            $textfield = $(this).find('.textfield');
        $dropdown.change(function () {
            if ($dropdown.val() != '1') {
                $textfield.removeAttr('disabled');
            } else {
                $textfield.attr('disabled', 'disabled').val('');
            }
        }).trigger('change'); // added trigger to calculate initial state
    });
});

$(document).ready(function () {
            var counter = 0;

            $("#addrow").on("click", function () {

                counter = $('#myTable tr').length - 2;

                var newRow = $('<tr class="row">');
                var cols = "";

                cols += '  <td>1</td><td><select name="select" id="selecta"><option value="0"></option><option value="1" selected>Lock</option><option value="2">Unlock</option></select> </td><td><input name="textfield" type="text" class="textfield" value="1" /></td><td><input name="textfield" type="text" class="textfield" value="1" /></td><td> <input name="textfield" type="text" class="textfield" value="1" /></td>';

                cols += '<td><input type="button"  value="x" ></td>';
                newRow.append(cols);
                if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
                $("table.color").append(newRow);
                counter++;
            });

    $("table.color").on("click", ".buttons", function (event) {
        $(this).closest("tr").remove();
        calculateGrandTotal();

        counter -= 1
        $('#addrow').attr('disabled', false).prop('value', "Add Rows");
    });


});

我想再次添加压力锁定行。

Answer 1

您不想使用duplicate IDs。因此，我已在您的标记和代码中将#selecta更改为.selecta。

由于您要动态添加行，因此在绑定＆＃39;行锁定时必须使用事件委派。处理程序如下：

$(document).ready(function () {
    $(document).on('change','.selecta',function() {
        $(this).closest('.row').find('.textfield')
        .prop('disabled', (this.value == '1'))
        .val( this.value == 1 ? '' : this.value );
    });
    $('.selecta').change();// added trigger to calculate initial state
});

然后，一旦添加了新行，您就必须触发该行中选择的更改：

newRow.find('.selecta').change();

WORKING JSFIDDLE DEMO

我更喜欢操纵disabled属性，而不必添加和删除disabled属性。

我想再次添加行和锁定

1 个答案: