Question

我希望在“无操作”列中执行单击以及单击的单元格时，操作不会发生。

<table id="table" border="1">
    <thead>
        <tr>
            <th>heading 1</th>        
            <th>heading 2</th>
            <th>no action</th>
            <th>heading 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="checkbox[1]" /></td>
            <td>row 1, cell 2</td>
            <td>row 1, cell 3</td>
            <td>row 1, cell 4</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox[2]" /></td>
            <td>row 2, cell 2</td>
            <td>row 2, cell 3</td>
            <td>row 2, cell 4</td>
        </tr>
    </tbody>
</table>


$('#table tbody tr').click(function(event) {
    var th = $('#table th').eq($(this).index());
    if(th.text() != 'no action'){
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    }
});

Answer 1

尝试

$('#table tbody td').click(function (event) {
    var th = $('#users-table th').eq($(this).index());
    if (th.text() != 'no action') {
        if (event.target.type !== 'checkbox') {
            $(this).closest('tr').find(':checkbox').prop('checked', function (i, checked) {
                return !checked;
            })
        }
    }
});

演示：Fiddle

但您可以使用事件委派模型跳过第3列中的click事件

$('#table tbody').on('click', 'td:not(:nth-child(3))', function (event) {
    if (event.target.type !== 'checkbox') {
        $(this).closest('tr').find(':checkbox').prop('checked', function (i, checked) {
            return !checked;
        })
    }
});

演示：Fiddle

如何检索单击的单元格的标题列的值？

1 个答案: