1

我有一个看起来像这样的表：

<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。

4

4 回答 4

4

您可以使用 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();
});

您可能更喜欢这种方法，以便单击已处于编辑模式的行不会隐藏和重新淡入它。

于 2013-01-24T21:25:08.173 回答
1

像这样？

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

  // hide all other .edit's and show all other labels
  $('#tblBranchCoverage tr').not(this).find('.edit').hide();
  $('#tblBranchCoverage tr').not(this).find('label').show();

  // hide this row's label and show this row's edit div
  $('label', this).hide();
  $('.edit', this).show();
});
于 2013-01-24T21:14:50.893 回答
0

这是您提到的代码片段。

var $tbl = $('#tblBranchCoverage'),
    $lables = $tbl.find('td .coverageDisplay');
    $editables = $tbl.find('td .edit'),
$tbl.on('click', 'tr', function() {
  var $this = $(this);
  $editables.hide();
  $lables.show();
  $this.find('.coverageDisplay').fadeOut(200);
  $this.find('.edit').delay(200).fadeIn(200);
});

这是 jsFiddle http://jsfiddle.net/greenrobo/JsGrx/的链接

于 2013-01-24T21:27:34.330 回答
0

您还需要禁用当前选定行的 onclick 触发器。这是我的实现：

http://jsfiddle.net/cH6Ba/15/

editRow() {

    $('#tblBranchCoverage .edit').hide(); // hide all edits. 
    $('#tblBranchCoverage label').show(); // show all labels. 
    $('#tblBranchCoverage tr').on('click', editRow); //rebind all events

    $(this).find('.edit').delay(200).fadeIn(200); // show our inputs
    $(this).find('label').delay(200).fadeOut(200); // hide our labels
    $(this).closest('tr').off('click', editRow); //unbind trigger on current row. 
};

$('#tblBranchCoverage tr').on('click', editRow);

Jeff 的解决方案也非常干净地完成了这一点。

于 2013-01-24T22:24:24.193 回答