Question

我有一张这样的表：

<table>
  <tr>
    <td><input type="button" title="Toggle" value="Show" id="btn534534" class="toggle" />    </td>
    <td>some data about ID 534534</td>
  </tr>
  <tr id="row534534" class="hiddenRow">
    <td colspan="2">some hidden data about ID 534534 that must show/hide with toggle</td>
  </tr>
  <tr>
    <td><input type="button" title="Toggle" value="Show" id="btn2423434" class="toggle" /></td>
    <td>some data about ID 2423434</td>
  </tr>
  <tr id="row2423434" class="hiddenRow">
    <td colspan="2">some hidden data about ID 2423434that must show/hide with toggle</td>
  </tr>
  <!-- many more rows here -->
</table>

上面有很多行“行”。对于每个“行”集，可以看到该表的一行。带有“hiddenRow”类的第二行在JQuery的页面加载中隐藏，如下所示：

$("tr.hiddenRow").hide();

现在我想让每个按钮在它之后立即切换行的可见性。请注意，可见行中的INPUT和隐藏行的TR共享一个唯一ID。我希望按钮onclick调用一个JQuery函数并传递ID，以便JQuery知道要切换哪一行。

有什么想法吗？我在网上找不到任何这方面的例子。

Answer 1

这应该可以解决问题：

$(document).ready(function() {
    $(".toggle").click(function() {
        $(this).closest('tr').next('tr.hiddenRow').toggle(); 
    });
});

http://jsfiddle.net/DU8rd/1（谢谢Šime Vidas）

注意：这不会按照您的指示传递ID，但它确实会创建您描述的行为。

Answer 2

我更喜欢@ Nathan的解决方案，但如果DOM关系变得更复杂，你会这样做：

$('#tableID input.toggle').click(function() {
    $('#row' + this.id.replace('btn', '')).toggle();
});

现场演示： http://jsfiddle.net/pHKat/1/

更新：与上述相同，但使用事件委派：

$('#tableID').click(function(e) {
    if (!$(e.target).hasClass('toggle')) { return; }
    $('#row' + e.target.id.replace('btn', '')).toggle();
});

这段代码有一行额外的代码，但在性能方面，这段代码更好，因为只有一个事件处理程序被绑定（对于table元素）。为了比较，我的原始解决方案（上面）为每个按钮绑定一个事件处理程序。

Answer 3

当你说：

时我的第一个建议

“MANY ...隐藏在页面加载”是你正在使用Javascript来完成CSS的工作，它已经导致或将导致性能问题。定义：

tr.hiddenRow {
    display: none;
}

在样式表中

，并删除页面上的加载代码。

我将使用以下内容来实现您的按钮代码：

$('input.toggle').live('click', function(ev) {
    var id = this.id.substr(3);
    var row = $('#row' + id);
    if (row.hasClass('hiddenRow'))
        row.removeClass('hiddenRow');
    else
        row.addClass('hiddenRow');
});

如果其他函数不需要行ID，则可以通过删除输入和tr上的ID来减小HTML的大小，然后使用DOM-walking实现切换：

$('input.toggle').live('click', function(ev) {
    var row = $(this).parents('tr').next('tr');
    if (row.hasClass('hiddenRow'))
        row.removeClass('hiddenRow');
    else
        row.addClass('hiddenRow');
});

编辑：之前没有遇到过jsfiddle - 这很有趣。在这里：http://jsfiddle.net/z6rAe/

再次更新以包含我对Šime答案的更正 - 为什么StackOverflow不会在评论中进行编码？

$('#tableID').click(function(ev) {
    if (!$(ev.target).hasClass('toggle')) { return; }
    $(ev.target.id.replace('btn', '#row')).toggle();
});

http://jsfiddle.net/7Dy5s/3/

Answer 4

使用像这样的自定义方法：

    <script type="text/javascript">
        function viewToggle(id){
            $('#'+id).slideToggle(500);
        }
    </script>

然后让每个按钮调用上面的函数传递你想要切换视图的id的值：

<table>
  <tr>
    <td><input type="button" onclick="viewToggle('row534534');" title="Toggle" value="Show" id="btn534534" class="toggle" />    </td>
    <td>some data about ID 534534</td>
  </tr>
  <tr id="row534534" class="hiddenRow">
    <td colspan="2">some hidden data about ID 534534 that must show/hide with toggle</td>
  </tr>
  <tr>
    <td><input type="button" onclick="viewToggle('row2423434');" title="Toggle" value="Show" id="btn2423434" class="toggle" /></td>
    <td>some data about ID 2423434</td>
  </tr>
  <tr id="row2423434" class="hiddenRow">
    <td colspan="2">some hidden data about ID 2423434that must show/hide with toggle</td>
  </tr>
  <!-- many more rows here -->
</table>

如何使用JQuery“切换”参数？

4 个答案: