如何在JavaScript中获取HTML表格行/单元格值并进行布尔判断？

问题说明 #

你有一个ASP.NET MVC生成的表格，点击表格行时需要获取UserPermission的布尔值，以此判断执行不同逻辑，现有代码中不知道如何获取该值。

修正后的实现方案 #

1. 先修正HTML表格的行属性

原代码中<tr>的自定义属性未正确赋值，且循环生成的行存在重复ID问题，先做如下调整：

<tbody>
@if (Model != null)
{
  foreach (CELIntranet.Models.tblReportsList item in Model)
  {
    bool hasPermission = User.IsInRole(item.ReportUserRoles) || User.IsInRole("Administrator");
    <tr class="clickable-row" data-user-permission="@hasPermission" 
        href="@Url.Action("ShowReport", new { ReportViewName = item.ReportViewName,
                                   ReportController = item.ReportController, UserPermission = hasPermission })">
      <td>@Html.Raw(item.ReportNumber)</td>
      <td>@Html.Raw(item.ReportName)</td>
      <td>@Html.Raw(item.ReportGroup)</td>
      <td>@Html.Raw(item.ReportStatus)</td>
      <td style="@(hasPermission ? "color:dodgerblue" : "color:orangered")">
          @(hasPermission ? "Granted" : "Restricted")
      </td>
    </tr>
  }
}
</tbody>

2. 修改JavaScript获取权限值并判断

在点击事件中，通过当前行的自定义data属性读取权限值，完成逻辑判断：

$(function () {
    $('table > tbody > tr').click(function () {
        // 从data属性获取权限布尔值
        var hasPermission = $(this).data('user-permission');
        
        if (hasPermission) {
            alert("Granted");
            Popup();
        } else {
            alert("Restricted");
        }
    });
});

备选方案：从单元格文本获取权限状态

如果不想依赖data属性，也可以直接读取最后一个单元格的文本内容判断：

$(function () {
    $('table > tbody > tr').click(function () {
        // 获取最后一个单元格的文本并去除空格
        var permissionText = $(this).find('td:last').text().trim();
        
        if (permissionText === "Granted") {
            alert("Granted");
            Popup();
        } else {
            alert("Restricted");
        }
    });
});

注意事项 #

• 移除了原代码中重复的id="myid"，循环生成的DOM元素不能有重复ID，否则会导致选择器异常。
• 用变量hasPermission统一存储权限判断结果，避免重复编写逻辑，提升代码可维护性。

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