jQuery - 如何显示和隐藏表中多行中的标签和输入

Question

我有一个如下所示的表格:

<table id="tblBranchCoverage" class="hideOnLoad" width="100%">
    <tr class="coverageRow" style="cursor: pointer;">
        <td class="countyCovered" width="115px">
            <label class="branchCountyCovered coverageDisplay">Douglas</label>
            <input type="text" class="edit editBox editCounty" style="display: none; width: 111px;" value="Douglas"><br>
            <input type="submit" class="button edit submitCoverageEdits" style="display: none;" value="Save Changes"><br>
            <input type="submit" class="button edit cancelCoverageEdits" style="display: none;" value="Cancel">
        </td>
        <td class="stateCovered" width="30px">
            <label class="branchStateCovered coverageDisplay">GA</label>
            <input type="text" class="edit editBox editState" style="display: none; width: 22px;" value="GA" max-length="2">
        </td>
        <td class="zipsCovered">
            <label class="branchZipsCovered coverageDisplay">30122, 30133, 30134, 30135, 30154, 30187</label>
            <textarea class="edit editBox editZips" style="display: none;" cols="100">30122, 30133, 30134, 30135, 30154, 30187</textarea>
        </td>
    </tr>
    <tr class="coverageRow">
        <td class="countyCovered" width="115px">
            <label class="branchCountyCovered coverageDisplay">Forsyth</label>
            <input type="text" class="edit editBox editCounty" style="display: none; width: 111px;" value="Forsyth"><br>
            <input type="submit" class="button edit submitCoverageEdits" style="display: none;" value="Save Changes"><br>
            <input type="submit" class="button edit cancelCoverageEdits" style="display: none;" value="Cancel">
        </td>
        <td class="stateCovered" width="30px">
            <label class="branchStateCovered coverageDisplay">GA</label>
            <input type="text" class="edit editBox editState" style="display: none; width: 22px;" value="GA" max-length="2">
        </td>
        <td class="zipsCovered">
            <label class="branchZipsCovered coverageDisplay">30028, 30040, 30041</label>
            <textarea class="edit editBox editZips" style="display: none;" cols="100">30028, 30040, 30041</textarea>
        </td>
    </tr>
</table>

我需要迭代表的行，找到具有类“的元素的行(最多只有一行，但可能所有行都将显示标签并隐藏输入)编辑”设置为“显示:无”。找到该行后，我需要隐藏 .edit 元素并显示标签(此时将设置样式“display: none”)。

我是在这种情况下这样做的:

$('#tblBranchCoverage').on('click', 'tr', function() {

因此，基本上，当用户单击一行时，表中的所有其他行都将隐藏 .edit 元素并显示标签，并且在单击的行中应显示编辑元素并隐藏标签。

我最接近它的工作是这样的:

    $(this).parent().find('tr td').each(function() {
        $(this).find('.edit').hide();
        $(this).find('.coverageDisplay [style*="display: none"]').show();
    });
    $(this).find('.coverageDisplay').fadeOut(200);
    $(this).find('.edit').delay(200).fadeIn(200);
});

这根本不是真正的“关闭”，因为单击的行会隐藏其所有元素。

我已经搞砸了两个小时了。我真的很想得到一些帮助!

谢谢。

[编辑]根据要求，这里有一个 jsFiddle .

Answer 1

您可以使用 jQuery 的 siblings()获取另一个的方法<tr>元素:http://api.jquery.com/siblings/

$('#tblBranchCoverage tr').click(function() {
    $(this).find('.edit').fadeIn(200);
    $(this).find('label').fadeOut(200);
    $(this).siblings('tr').find('label').show();
    $(this).siblings('tr').find('.edit').hide();
});

您可能更喜欢这种方法，这样单击已处于编辑模式的行就不会隐藏它并使其重新淡入淡出。