admin管理员组

文章数量:1326051

I would like to make my table filter more elegant. Basically, this table will have links at the bottom to hide and show rows based on attributes in the table. It's working the way I want, but I feel like I could have written using a lot fewer lines of jQuery... Anyone have any ideas?

Here's the jsfiddle: /

And the code:

<!--*******************************************************
jquery that needs cleaned up appears at the end of this file!
Code is online at JSFIDDLE: /
*********************************************************-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
    <script src=".7.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    <table> 
        <thead> 
            <tr> 
                <th>Color Table</th>
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="white">white</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="bluewhite">bluewhite</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr>
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
        </tbody> 
    </table> 
    <br />
    <br />
    <div class="filtertable">
        <a href="#" data-color="all">All</a>
        <a href="#" data-color="red">Red</a>
        <a href="#" data-color="white">White</a>
        <a href="#" data-color="blue">Blue</a>
        <a href="#" data-color="bluewhite">Blue and White</a>
    </div>

<script type="text/javascript">

/*******************************************************
Here is the jquery I need help with, how can I reduce the code
I've written? Code is online at JSFIDDLE: /
*********************************************************/

$(document).ready(function() 
    { 
    /*****************************************************************
    when users clicks the "all" filter, show all the hidden table rows
    *****************************************************************/
    $('.filtertable a[data-color=all]').click(function() {
        $('td[data-color]').parent().show();
    });
    /****************************************************************
    when users clicks the "red" filter, hide all but red table rows
    *****************************************************************/
    $('.filtertable a[data-color=red]').click(function() {
        $('td[data-color=red]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "white" filter, hide all but white table rows
    ****************************************************************/
    $('.filtertable a[data-color=white]').click(function() {
        $('td[data-color=white]').parent().show();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /****************************************************************
    when users clicks the "blue" filter, hide all but blue table rows
    *****************************************************************/
    $('.filtertable a[data-color=blue]').click(function() {
        $('td[data-color=blue]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "blue and white" filter, hide all but blue+white table rows
    *****************************************************************/
    $('.filtertable a[data-color=bluewhite]').click(function() {
        $('td[data-color=bluewhite]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=red]').parent().hide();
    });
} 
); 
</script>
</body>
</html>

I would like to make my table filter more elegant. Basically, this table will have links at the bottom to hide and show rows based on attributes in the table. It's working the way I want, but I feel like I could have written using a lot fewer lines of jQuery... Anyone have any ideas?

Here's the jsfiddle: http://jsfiddle/vC88q/1/

And the code:

<!--*******************************************************
jquery that needs cleaned up appears at the end of this file!
Code is online at JSFIDDLE: http://jsfiddle/vC88q/1/
*********************************************************-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
    <script src="http://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    <table> 
        <thead> 
            <tr> 
                <th>Color Table</th>
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="white">white</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="bluewhite">bluewhite</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr>
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
        </tbody> 
    </table> 
    <br />
    <br />
    <div class="filtertable">
        <a href="#" data-color="all">All</a>
        <a href="#" data-color="red">Red</a>
        <a href="#" data-color="white">White</a>
        <a href="#" data-color="blue">Blue</a>
        <a href="#" data-color="bluewhite">Blue and White</a>
    </div>

<script type="text/javascript">

/*******************************************************
Here is the jquery I need help with, how can I reduce the code
I've written? Code is online at JSFIDDLE: http://jsfiddle/vC88q/1/
*********************************************************/

$(document).ready(function() 
    { 
    /*****************************************************************
    when users clicks the "all" filter, show all the hidden table rows
    *****************************************************************/
    $('.filtertable a[data-color=all]').click(function() {
        $('td[data-color]').parent().show();
    });
    /****************************************************************
    when users clicks the "red" filter, hide all but red table rows
    *****************************************************************/
    $('.filtertable a[data-color=red]').click(function() {
        $('td[data-color=red]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "white" filter, hide all but white table rows
    ****************************************************************/
    $('.filtertable a[data-color=white]').click(function() {
        $('td[data-color=white]').parent().show();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /****************************************************************
    when users clicks the "blue" filter, hide all but blue table rows
    *****************************************************************/
    $('.filtertable a[data-color=blue]').click(function() {
        $('td[data-color=blue]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "blue and white" filter, hide all but blue+white table rows
    *****************************************************************/
    $('.filtertable a[data-color=bluewhite]').click(function() {
        $('td[data-color=bluewhite]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=red]').parent().hide();
    });
} 
); 
</script>
</body>
</html>
Share Improve this question edited Jul 23, 2018 at 10:41 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked May 3, 2012 at 3:41 FredFred 2321 gold badge6 silver badges11 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 3
$(document).ready(function()
    {
        $('.filtertable a[data-color]').click(function() {
            var color = $(this).data().color;
            if(color == 'all'){
                 $('td[data-color]').parent().show();
            } else {
                $('td[data-color='+ color +']').parent().show();
                $('td[data-color!='+color+']').parent().hide();
            }
        });
    }
); 

I frequently use CSS for this sort of thing.

<table id="myTable" class="all">
  <tr class="red"><td>red</td></tr>
  <tr class="yellow"><td>yellow</td></tr>
  <tr class="blue"><td>blue</td></tr>
<table>

<div class="controls">
  <a href="#" data-color="all">All</a>
  <a href="#" data-color="red">Red</a>
  <a href="#" data-color="white">White</a>
  <a href="#" data-color="blue">Blue</a>
</div>

And then in JS

$('.controls a').on('click', function(e){
  e.preventDefault();
  var c= $(this).data('color');
  $('#myTable')[0].className = c;
});​

The CSS determines what shows when:

tr { display: none; }
.all tr { display: table-row; }
.red tr.red { display: table-row; }
.blue tr.blue { display: table-row; }
.yellow tr.yellow { display: table-row; }

In JSFiddle.

Here's a demo

$(function() {
    var td = $('#colortable td');
    $('.filtertable').on('click', 'a', function() {
        var color = this.getAttribute('data-color');
        if (color === 'all') {
            td.parent().show()
        } else {
            td.filter('[data-color=' + color + ']').parent().show()
            td.filter('[data-color!=' + color + ']').parent().hide()
        }
    });
});​

http://jsfiddle/vC88q/6/

    $('.filtertable a[data-color]').click(function() {
        var color = $(this).data().color;
        $('td[data-color=' + color + ']').parent().show();
        $('td[data-color!=' + color + ']').parent().hide();
    });

The following should replace all your code.

$(document).ready(function() {
    $('.filtertable a[data-color]').click(function() {
        var $this = $(this), color = $this.data('color');
        if (color !== 'all') {
            $('td[data-color]').parent().hide();
        }
        $('td[data-color' + (color !== 'all' ? '=' + color : '') + ']').parent().show();
    });
});​

EDIT: Updated to fix 'All' link

本文标签: javascriptMore elegant way to filter out table rows using jQueryStack Overflow