Question

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?

http://jsfiddle.net/vC88q/1/"rel=“nofollow noretinger” http://jsfiddle.net/vC88q/1/

守则:

<!--*******************************************************
jquery that needs cleaned up appears at the end of this file!
Code is online at JSFIDDLE: http://jsfiddle.net/vC88q/1/
*********************************************************-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/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.net/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>

Answer 1

$(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();
            }
        });
    }
);

Answer 2

我经常利用特别安全局做这样的事。

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

之后在联合材料中

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

社会保障局确定:

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; }

http://jsfiddle.net/z4QKT/“rel=“nofollow”>JSFiddle。

Answer 3

rel=“nofollow” 页: 1

$(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()
        }
    });
});

Answer 4

http://jsfiddle.net/vC88q/6/>rel=“nofollow” http://jsfiddle.net/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();
    });

Answer 5

下面应取代你们的所有法典。

$(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: 更新以固定所有链接

友情链接