如何通过item自定义属性定位表格行并实现滚动到指定用户功能

提问内容 #

我找解决方案的时候发现，大部分相关问题都只讲了怎么通过id获取表格，方法如下：

document.getElementById("#tableID")

但我实际场景里的表格不像教程里那么规整，我需要实现下面这个函数：

function scrollToUser(user_id){ 
 xxxx?;
}

现有表格结构如下：

<div id="users">
    <table class="data table table-striped" width="100%" style="" id="table0">
        <thead>
            <tr>
                <th class="js--entity-list__header entity-list__header">
                    <span class="columnsSettings">&nbsp;</span>
                    <span class="sorter entity-list__header--fakelink js--orderAsc" order="1">Username <span class="js--orderIcon fa fa-chevron-up">
                    </span>
                </span>
            </th>
            <th class="js--entity-list__header entity-list__header">Source</th>
            <th class="js--entity-list__header entity-list__header">
                <span class="sorter entity-list__header--fakelink " order="2">Surname, First name <span class="js--orderIcon fa ">
                </span>
            </th>
            <th class="js--entity-list__header entity-list__header">Cost center</th>
            <th class="js--entity-list__header entity-list__header">Email</th>
            <th class="js--entity-list__header entity-list__header entity-list__header--icon">&nbsp;</th>
            <th class="js--entity-list__header entity-list__header entity-list__header--icon">&nbsp;</th>
            <th class="js--entity-list__header entity-list__header entity-list__header--icon">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr class="js--entity-list__row " item="id17">
            <td class=" firstcell  ">admin</td>
            <td class=" ">Internal</td>
            <td class=" breakable">Administrator, System</td>
            <td class=" ">0</td>
            <td class=" "></td>
            <td class=" entity-list__icon-column ">
                <span class="">
                </span>
            </td>
            <td class=" entity-list__icon-column ">
                <span class="ico_user_edit icon fa fa-wrench" tooltip="0">
                </span>
            </td>
            <td class=" entity-list__icon-column ">
                <span class="">
                </span>
            </td>
        </tr>
        <tr class="js--entity-list__row " item="id28">
            <td class=" firstcell  ">login_0</td>
            <td class=" ">Internal</td>
            <td class=" breakable">surname_0, name_0</td>
            <td class=" ">10</td>
            <td class=" ">email_0</td>
            <td class=" entity-list__icon-column ">
                <span class="ico_role_access icon fa fa-credit-card" tooltip="1">
                </span>
            </td>
            <td class=" entity-list__icon-column ">
                <span class="ico_user_edit icon fa fa-wrench" tooltip="2">
                </span>
            </td>
            <td class=" entity-list__icon-column ">
                <span class="ico_user_delete icon fa fa-trash" tooltip="3">
                </span>
            </td>
        </tr>
        <tr class="js--entity-list__row " item="id29">
            <td class=" firstcell  ">login_1</td>
            <td class=" ">Internal</td>
            <td class=" breakable">surname_1, name_1</td>
            <td class=" ">10</td>
            <td class=" ">email_1</td>
            <td class=" entity-list__icon-column ">
                <span class="ico_role_access icon fa fa-credit-card" tooltip="4">
                </span>
            </td>
            <td class=" entity-list__icon-column ">
                <span class="ico_user_edit icon fa fa-wrench" tooltip="5">
                </span>
            </td>
            <td class=" entity-list__icon-column ">
                <span class="ico_user_delete icon fa fa-trash" tooltip="6">
                </span>
            </td>
        </tr>
    </tbody>
</table>

行的唯一标识是item属性，比如item="id28"就是id为28的用户对应的行，对应代码：

<tr class="js--entity-list__row " item="id28">

我希望调用scrollToUser(28)就能滚动到对应用户行。
目前我试了所有方法都没成功，调试过的代码如下：

var rows = $("#users,table,tbody")[2].rows;
for(item in rows){console.log(item.innerText);}
$(rows[0]).attr("item"); // 这里我能拿到属性值，但不知道怎么不硬编码下标[0]来搜索
$("#users,table,tbody > tr:eq(admin)").position();
var x = $("#users,table,tbody");
$([document.documentElement, document.body]).animate({ scrollTop: $(document.getElementById("table0").rows[1]).offset().top }, 2000);

我最困扰的点是，拿到类似row[2]的对象时，返回值类型都是object，我不清楚能调用哪些具体方法。

解决方案 #

可直接运行的实现代码 #

function scrollToUser(user_id){
    // 拼接item属性值，直接定位目标行
    const targetRow = $(`#users table tr[item="id${user_id}"]`);
    // 目标行不存在直接返回，避免报错
    if(targetRow.length === 0) return;
    // 执行滚动动画，-50为顶部偏移量，可根据页面顶部导航高度调整
    $('html, body').animate({
        scrollTop: targetRow.offset().top - 50
    }, 200);
}

核心说明 #

• 选择器直接用jQuery的属性匹配规则，不需要手动遍历所有行，也不用硬编码下标，性能和可读性更高
• 你之前代码的核心错误是选择器误用了逗号：$("#users,table,tbody")里的逗号是并列选择多个元素的意思，会同时选中#users、所有table、所有tbody，后代选择应该用空格分隔：$("#users table tbody")
• 拿到DOM对象后如果不确定可调用的方法，用console.dir(对象)在控制台打印，就能看到完整的属性和方法列表；如果是jQuery包装的对象，可直接调用所有jQuery提供的DOM操作方法。

内容的提问来源于stack exchange，提问作者J.Doe