Javascript 如何选择表格

我正在处理一个表，单击时需要对每一行应用函数。我一直在尝试将CSS应用于行，CSS只应用于表中的第一行。如何在单击时将CSS应用于特定的单行而不干扰其他行

下面是我的代码

$(function() {
    $('#example a').click(function(e) {
        $(this).next('tr').css('background', 'red');
    });
});

<table id="example" class="display">

<tbody>

    <tr id="ajaxinbox">
        <td class="read-message-now">
            <li class="list-group-item">
                <a data-id="{{ $msgBox->mid }}" sender="{{ $msgBox->id }}" att-data="{{ $msgBox->att_msg_ref }}">
                    <span class="sender-name center-block notread" id="{{$msgBox->mid}}">
                        <span class="sender-name center-block" id="nameview"> <small class="datestamp read-datestamp"> </small>
                        </span>
                        <span class="message-subject">
                            <span class="notread" id="msgsub{{$msgBox->mid}}"> </span>
                            <span id="readview"></span>
                            <i class="fa fa-file-text-o hasfile"></i>
                        </span>
                    </a>
                    <label id="hascheck"><input type="checkbox" name="haschecked" id="{{ $msgBox->mid }}"  value="{{ $msgBox->mid }}" class="i-check" autocomplete="off"><span></span></label>
                </li>
            </td>
        </tr>

        <tr id="ajaxinbox">
        <td class="read-message-now">
            <li class="list-group-item">
                <a data-id="{{ $msgBox->mid }}" sender="{{ $msgBox->id }}" att-data="{{ $msgBox->att_msg_ref }}">
                    <span class="sender-name center-block notread" id="{{$msgBox->mid}}">
                        <span class="sender-name center-block" id="nameview"> <small class="datestamp read-datestamp"> </small>
                        </span>
                        <span class="message-subject">
                            <span class="notread" id="msgsub{{$msgBox->mid}}"> </span>
                            <span id="readview"></span>
                            <i class="fa fa-file-text-o hasfile"></i>
                        </span>
                    </a>
                    <label id="hascheck"><input type="checkbox" name="haschecked" id="{{ $msgBox->mid }}"  value="{{ $msgBox->mid }}" class="i-check" autocomplete="off"><span></span></label>
                </li>
            </td>
        </tr>

    </tbody>

</table>

$（函数（）{
$（“#示例a”）。单击（函数（e）{
$（this.next（'tr'）.css（'background'，'red'）；
});
});

.next（）

查看行中的下一个元素-您需要找到最近的

并设置CSS:

$('#example a').click(function(e) {
    $(this).closest('tr').css('background', 'red');
});

另外-
元素必须位于
元素内部。
请尝试最近的（）函数，而不是next（）

或者，如果愿意，可以尝试将单击事件直接添加到
tr
元素中

$(function() {
    $('#example tr').click(function(e) {
        $(this).css('background', 'red');
    });
});

您的HTML无效。列表项元素需要位于
或
中。此外，ID必须是唯一的。
$(function() {
    $('#example tr').click(function(e) {
        $(this).css('background', 'red');
    });
});