Question

我有一个带有标题和一些行的表。每行都有自己的组，有时它们可能与之前的组代码相似此外，我有一个包含组ID的下拉列表。我想只显示与下拉列表当前值相等的行例如，这是我的表id="myTable"： enter image description here

这是我的下拉菜单：

<select id="groups" name="groups">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

当用户将当前选定的下拉菜单项更改为1时，我需要删除第2行和第3行。我怎么能用jQuery做到这一点？

Answer 1

这样的事情：

$("#groups").change(function() {
    var currentGroup = $(this).val();
    $("#myTable tr").each(function() {
       if (this.rowIndex==0) return; // skip heading
       if ($(this).children("td").eq(-1).text() == currentGroup)
          $(this).show();
       else
          $(this).hide();
    });
});

演示：http://jsfiddle.net/DBCcF/1/

您可以通过将第三列中的单元格赋予特定类来简化JS，但是我认为这会使标记变得复杂，所以......无论您喜欢什么。

Answer 2

$("#groups").on("change", function() {
    var rowNum = $(this).val();
    $("#myTable tr")
        .show()
        .each(function() {
            var $this = $(this).find("td:nth-child(3)");
            if ($this.text() !== rowNum) {
                $this.closest("tr").hide();
            }
        });
});

Demo

这将根据每行中每第三个单元格的内容检查所选元素的值。如果它不匹配，它会隐藏它。

Answer 3

有很多方法可以做到这一点。最简单的是需要对表结构进行一些小改动，因为我们需要一种在表中查找groupid的方法。你可以做的只是在包含这样的groupid的单元格中添加一个类：

<tr>
    <td>1</td>
    <td>Jack</td>
    <td class='groupId'>1</td>
</tr>

然后你会编写类似于其他答案的javascript，除非你不需要使用nth-child(3)或eq(-1)等不灵活的技巧。这将使javascript更灵活地改变。

你最终可能会遇到这样的事情：

function hideRows(){
    // find selected value (get only the first as multi-selected is not required)
    var selected = $('#groups option:selected')[0].value;
    // walk through all cells that have the groupId class
    $('#myTable td.groupId').each(function(){
        // get current cell
        var currentCell = $(this);
        // get the cells groupid
        var groupid = currentCell.text();
        // determine if it the group id matches the selected value and hide/show
        if(groupid !== selected){
            currentCell.parent().hide();
        }
        else{
            currentCell.parent().show();
        }
    }); 
}
// wire-up select change event
$('#groups').change(hideRows);

如果没有某种方法来隔离表中的groupid单元格，您将需要采用上述技术之一来获取正确的列。

JSFiddle - http://jsfiddle.net/GFzcp/5/

如何在jQuery中删除表的特定行

3 个答案: