如何用JavaScript实现EventID以1开头时UI显示横线且点击传真实ID

问题背景 #

当前展示的表格数据如下：

EventID      EventName

120220001    Seminar
E20220012    Sample Demo
120220999    Data Analysis
A20229872    Seminar 12

新需求要求：

• 若EventID以"1"开头，UI仅显示与ID长度一致的横线，不显示真实数字
• 若EventID以其他字符开头，正常显示真实ID
• 仅做UI层面的显示修改，用户点击记录时，仍需将真实EventID传递给后端获取数据

此前尝试CSS+HTML实现失败，需通过JavaScript完成该需求。

现有代码片段：

表格生成代码 #

for (var i = 0; i < response.length; i++) {
                        var body = "<tr>";
                        body += "<td>" + response[i].eventId + "</td>";
                        body += "<td>" + response[i].eventName + "</td>";
body += "<tr>";

点击获取EventID代码 #

var eventId = $('#summary-table tr:eq(' + rowId + ') td:eq(0)').text().trim();

实现思路与代码修改 #

核心思路：将真实EventID存储在HTML元素的自定义data-*属性中，UI层根据规则渲染显示内容，点击时直接读取自定义属性中的真实ID，避免依赖文本内容。

1. 修改表格生成逻辑 #

在生成<td>元素时，判断EventID的开头字符，动态生成显示文本，同时把真实ID存入data-event-id属性：

for (var i = 0; i < response.length; i++) {
    var eventId = response[i].eventId;
    // 判断是否以"1"开头，生成对应显示文本
    var displayText;
    if (eventId.charAt(0) === '1') { // 兼容所有浏览器，替代ES6的startsWith
        // 生成与ID长度一致的横线
        displayText = '';
        for(var j = 0; j < eventId.length; j++) {
            displayText += '-';
        }
    } else {
        displayText = eventId;
    }
    var body = "<tr>";
    // 将真实ID存入data-event-id属性
    body += "<td data-event-id='" + eventId + "'>" + displayText + "</td>";
    body += "<td>" + response[i].eventName + "</td>";
    body += "</tr>"; // 修正原代码的闭合错误，原代码写的是<tr>，应为</tr>
}

2. 修改点击获取ID的逻辑 #

不再从<td>的文本内容提取ID，直接读取data-event-id属性的值：

var eventId = $('#summary-table tr:eq(' + rowId + ') td:eq(0)').data('event-id');

如果是通过事件绑定实现点击（更推荐的方式），可以这样写：

// 给表格行绑定点击事件
$('#summary-table tr').on('click', function() {
    var eventId = $(this).find('td:first').data('event-id');
    // 此处调用后端接口，传递eventId即可
});

3. 兼容性说明 #

• 若项目环境支持ES6+，可以简化显示文本的生成：

  var displayText = eventId.startsWith('1') ? '-'.repeat(eventId.length) : eventId;
  

• data-*属性是HTML5标准特性，所有现代浏览器及IE11+均支持。

内容的提问来源于stack exchange，提问作者selva raj