javascript - 点击dataTable的复选框，改变后面的属性-PHP中文网问答

点击前面的复选，改变后面文本框的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>

$('table').DataTable({ ..... createdRow: function( row, data, dataIndex ) { $(':checkbox', row).on('click', function(){ $(':text', row).prop('disabled', this.checked); }).triggerHandler('click'); //这是加载之后对input做初始的disabled } });

全部回复(4)

PHP中文网2017-04-11 10:12:21 4楼

直接上代码

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

赞 +0

添加回复

PHP中文网2017-04-11 10:12:21 3楼

给前面的单选框给一个自定义属性 data-xxx ,xxx 可以指向后面input的id，这样监听哪个框选中，就可以读取它的这个自定义属性，而且读取的值又是后面的input的id，方便选中操作，如果是很多行，不需要给id的话，那就用class也行，只是要筛选下，总之就是用自定义属性和后面的框耦合起来，自定义属性读取和内置属性的读取注意是不太一样的哦；
如果什么也不想做，那么其实就是监听选中事件，然后利用选择器选择这个单选框后面的input框，添加或者删除disable属性。

巴扎黑2017-04-11 10:12:21 2楼

DataTable有一个createdRow回调

PHP中文网2017-04-11 10:12:21 1楼

$(this)就是当前tr，你再操作当前tr里对应的th就可以了