javascript - 点击dataTable的复选框,改变后面的属性

查看:89
本文介绍了javascript - 点击dataTable的复选框,改变后面的属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

点击前面的复选,改变后面文本框的disable值

或者怎么可以点击获取点击行的索引值

求教大神

生成表格代码是这样的

<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>复选框</th>
            <th>一级</th>
            <th>二级</th>
            <th>输入框</th>
        </tr>
    </thead>


</table>
<script>
    var data=[
        {"online":"false","first":"政府办公","second":"公积金","info":""},
        {"online":"true","first":"政府办公","second":"社保","info":""}
    ];
    var table=$("#example").DataTable({
        "data":data,
        "columns":[
            {"data":"online"},
            {"data":"first"},
            {"data":"second"},
            {"data":"info"}
        ],
        "columnDefs":[
            {
                "render":function(data,type,row){
                    if(row.online=="true"){
                        return "<input type='checkbox' checked/>"
                    }else{
                        return "<input type='checkbox'/>"
                    }
            },
                "targets":0
            },
            {
                "render":function(data,type,row){
                    if(row.online=="true"){
                        return "<input type='text'/>"
                    }else{
                        return "<input type='text' disabled/>"
                    }

            },
                "targets":3
            }
        ]
    });
    $("#example tbody").on("click","tr",function(){
        //如何得到选中行的索引
    })
</script>
</body>

解决方案

直接上代码

$("#example tbody").on("click","tr",function(){
      var tr = $(this);
      var index = tr.index();
      tr.find("input").prop("disabled",true);
})

这篇关于javascript - 点击dataTable的复选框,改变后面的属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆