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);
});

我在这里有一个小提琴：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在整个文档中应该是唯一的。

克隆表与隐藏行

1 个答案: