javascript - 如何使用 JQuery 使表行的一部分可单击

Question

我想要除了最后一个之外的所有 <td>每个表格行中的元素成为一个可点击的单元。 这是我所拥有的:

<table class="table table-bordered" id="dashboard-table">
    <thead>
        <tr>
            <th>Open Date</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @for(ach_case <- caseList) {
            <tr>
                <div class="clickable-row">
                    <td>@ach_case.formatDate(ach_case.dateCreated)</td>
                    <td>@ach_case.name</td>
                </div>
                <td>
                    <button type="button" class="btn-warning btn-action"
                        onclick="window.location='@routes.CaseController.editCase(ach_case.id)';"></button>
                </td>
            </tr>
        }
    </tbody>
</table>

JQuery

$(document).ready(function(){
    $('.clickable-row').click(function() {
        console.log("Row clicked");
    });
});

这没有任何作用。我很累，所以希望这只是一个简单的问题。

Answer 1

我稍微更改了代码来演示 - 添加警报而不是 console.log，但一种方法是为每个 <td> 添加一类可点击的内容除了最后一个装有按钮的按钮之外。您可以将可点击类添加到 <tr> ，但你还是要防止对最后一个<td>的影响每个<tr> - 最好将可点击类添加到 <td>是您想要包含的内容，而不是将其添加到整行并排除最后一个 <td> .

$(document).ready(function(){
    $('.clickable').click(function() {
        alert("Row clicked");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="dashboard-table">
    <thead>
        <tr>
            <th>Open Date</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
   
            <tr >
                    <td class="clickable">test</td>
                    <td class="clickable">test</td>
                <td>
                    <button type="button" class="btn-warning btn-action"
                        onclick="window.location='@routes.CaseController.editCase(ach_case.id)';">test</button>
                </td>
            </tr>

    </tbody>
</table>