table列的显示关闭

随手写了这样一个功能,很简单,作为一个记录吧。

Paste_Image.png

HTML

<label for="a"><input type="checkbox" id="a" value="1" checked />一</label>
<label for="b"><input type="checkbox" id="b" value="2" checked />二</label>
<label for="c"><input type="checkbox" id="c" value="3" checked />三</label>
<label for="d"><input type="checkbox" id="d" value="4" checked />四</label>
<label for="e"><input type="checkbox" id="e" value="5" checked />五</label>
<table>
    <tr>
        <td>一</td>
        <td>二</td>
        <td>三</td>
        <td>四</td>
        <td>五</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr><tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

JS

$(function(){
    $("label").click(function(){
        var checkbox = $(this).find("input").val();
        var checked = $(this).find("input").prop("checked");
        if(checked){
            $("table tr").each(function(){
                $(this).find("td").eq(checkbox-1).show()    
            })
        }else{
            $("table tr").each(function(){
                $(this).find("td").eq(checkbox-1).hide()
            })
        }
    })
})  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,126评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,273评论 4 61
  • 利用sublime text 3 + LaTexTools + TexLive + SumatraPDF搭建LaT...
    WooWoods阅读 1,613评论 0 1
  • 《善心并不能“拯救”他们》 前几天在地铁上,遇到一个二十来...
    营营苟苟阅读 271评论 0 0
  • 三哥当然不是什么江湖义气的兄弟,也不是家里排行的兄弟,他是我的初中同学,因为他在家里行三,年纪比我大些,所...
    d10bb5b42529阅读 270评论 0 0