如何在jQuery中动态获取ID实现点击链接高亮DataTable匹配行

需要在jQuery代码中动态获取ID，点击href链接后为表格中值匹配的行着色。现有代码仅支持单ID处理，链接通过Smarty的foreach循环动态生成，需修改JS代码实现点击任意动态生成的链接后，高亮所有包含对应搜索词的行。

Smarty HTML代码 #

{foreach from=$translateArray key=key item=value}
 {if $key == $k}
     <a href="#" classe="inactiveLink" id="id_{$k}" style="color:#000080;">{$value}</a> 
     ({$val}) |
 {/if}
{/foreach}

原有绑定固定ID的jQuery(dataTable)代码 #

$(document).ready(function () {
var table = $("#my_table").DataTable({
    "rowCallback": function (row, data) {

        $('#id_single').on('click', function () {
            var value = $("#id_single").text();// How to get id dynamically here
            console.log(value);
            highLight(value, row);
        });

        function highLight(value, row) {
            $(row).css('color', 'unset');
            $(row).css('font-weight', 'unset');

            if (data[2] === value) {
                $(row).css('background-color', 'lightblue');
                $(row).css('font-weight', 'bold');
            }
        }

    }
});
});

原有代码存在三个核心问题：

• 仅绑定了固定ID#id_single的点击事件，无法适配Smarty循环生成的多个动态ID链接
• 点击事件绑定写在rowCallback回调中，每渲染一行就会重复绑定一次事件，导致点击后逻辑重复执行
• 高亮逻辑仅处理当前渲染的单一行，没有遍历整个表格所有匹配行

第一步（可选）：修正Smarty代码 #

建议给所有需要触发高亮的链接新增一个公共类，方便后续事件绑定，同时修正原有代码中classe的拼写错误：

{foreach from=$translateArray key=key item=value}
 {if $key == $k}
     <!-- 新增search-highlight-link公共类，修正class属性拼写 -->
     <a href="#" class="inactiveLink search-highlight-link" id="id_{$k}" style="color:#000080;">{$value}</a> 
     ({$val}) |
 {/if}
{/foreach}

如果不方便修改Smarty模板，可以跳过这一步，后续用ID前缀选择器绑定事件即可。

第二步：修改jQuery代码 #

将事件绑定从rowCallback中移出，用事件委托适配动态生成的元素，点击后遍历全表行做高亮处理：

$(document).ready(function () {
    var table = $("#my_table").DataTable();

    // 事件委托绑定点击事件
    // 如果没有修改Smarty加公共类，这里的选择器替换成'a[id^="id_"]'即可
    $(document).on('click', '.search-highlight-link', function () {
        // 动态获取当前点击链接的文本值
        var searchValue = $(this).text().trim();
        // 遍历表格所有行统一处理
        table.rows().every(function () {
            var row = this.node();
            var rowData = this.data();
            // 先重置所有行的样式
            $(row).css({
                'color': 'unset',
                'font-weight': 'unset',
                'background-color': 'unset'
            });
            // 匹配到对应值则加高亮
            if (rowData[2] === searchValue) {
                $(row).css({
                    'background-color': 'lightblue',
                    'font-weight': 'bold'
                });
            }
        });
    });
});

优化建议 #

• 可以把高亮样式封装到CSS类中，避免直接操作行内样式，后续维护更方便：

.highlight-row {
    background-color: lightblue;
    font-weight: bold;
}

JS中直接用类操作即可：

// 重置样式
$(row).removeClass('highlight-row');
// 匹配后加样式
$(row).addClass('highlight-row');

• 如果需要支持模糊匹配，把全等判断===改成includes()即可：

if (rowData[2].includes(searchValue))

内容的提问来源于stack exchange，提问作者messoaud Rostane