最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - More elegant way to filter out table rows using jQuery? - Stack Overflow

programmeradmin1浏览0评论

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

发布评论

评论列表(0)

  1. 暂无评论