帶有隱藏行的克隆表

Question

我有一個重復表，其中有一個隱藏行，當單擊一個復選框時，我會出現該行，但是當添加多個表時，總會出現同一行，而不是剛剛克隆的行。 我將不勝感激。

我的代碼如下所示：

HTML：

<table class="repeatingTable">
    <tr>
        <td>
            <label for="name">Name</label>
        </td>
        <td>
            <input type="text" name="name" id="InputName" class="InputID_1" />
        </td>
        <td>
            <label for="req">Required</label>
        </td>
        <td>
            <input type="checkbox" name="req" id="CheckBox" class="ChexkBox_1" readonly="readonly" />
        </td>
    </tr>
    <tr id="HiddenFields" class="HiddenFields_1">
        <td>
            <label for="Box">Box Number</label>
        </td>
        <td>
            <input type="number" name="Box" id="InputBoxNo" class="InputBoxNo_1" readonly="readonly" />
        </td>
        <td>
            <label for="id">ID Number</label>
        </td>
        <td>
            <input type="number" name="id" id="inputNo" class="InputNo_1" />
        </td>
    </tr>
</table>
<div class="expensesBtns">
    <input id="repeatingBtn" type="button" value="Add Another" />
</div>

Javascript：

document.getElementById("HiddenFields").style.visibility = "hidden";

 $('.ChexkBox_1').click(function () {
    if (!$(this).is(':checked')) {
        document.getElementById("HiddenFields").style.visibility = "hidden";
    }
    else {
        document.getElementById("HiddenFields").style.visibility = "visible";
    }
})


 $('#repeatingBtn').click(function (e) {
    //$('.expensesSection').clone(false).find("*[id]").andSelf().each(function () {
    //    $(this).attr("id", $(this).attr("id") + "_cloned");
    //})
    e.preventDefault();
    var lastRepeatingGroup = $('.repeatingTable').last();
    var cloned = lastRepeatingGroup.clone(true);
    cloned.insertAfter(lastRepeatingGroup);
    cloned.find("input").val("");
    //resetAttributeNames(cloned);
});

我在這里有一個js小提琴： jsfiddle

任何幫助是極大的贊賞。

Answer 1

檢查您的更新字段 。

在ChexkBox_1 click事件中進行一些更改后，您必須使用$(this)而不是document.getElementById("HiddenFields")處理當前單擊的復選框：

$('.ChexkBox_1').click(function () {
    if (!$(this).is(':checked')) {
        $(this).parents('table').find(".HiddenFields_1").css('visibility',"hidden");
    }
    else {
        $(this).parents('table').find(".HiddenFields_1").css('visibility',"visible");
    }
});

注意：克隆行時，您必須更改id因為元素ID在整個文檔中應該是唯一的。