使用隐藏行克隆 table

Question

我有一个带有隐藏行的重复 table，当单击一个复选框时，我会出现该行，但是当添加多个 table 时，总是出现同一行而不是该行刚刚被克隆。如果对此有任何帮助，我将不胜感激。

我的代码如下所示：

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 fiddle：jsfiddle

非常感谢任何帮助。

Answer 1

检查你的UPDATED FIDDLE。

在 ChexkBox_1 单击事件中进行一些更改后工作，您必须使用 $(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 在整个文档中应该是唯一的。

使用隐藏行克隆 table

Cloning table with hidden row

javascript

hidden

clone

html-table