java - 单击链接时需要禁用表

Question

我有一个包含链接的 bootstrap 3 表。我所追求的是在单击其中一个链接时禁用表格，并让表格向用户提供表格被禁用的视觉效果(例如，变为浅透明灰色并使其他链接在以下情况下不带下划线)悬停。

下面的代码是如何填充我的表的

<table class="table table-hover table-striped hidden-xs" id="clientListTable">
                <tr><%
                foreach (var cell in data.Header.Cells)
                {
                    var showFilterOption = (cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Currency || cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Double || cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Integer);
                    var filterIcon = ResolveUrl("~/Resources/Images/Interface/filter_icon.png");
                    var sortDirection = AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Ascending.ToString();
                    if (data.ColumnSort == cell.SortOn && data.ColumnSortDirection == AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Ascending)
                    {
                        sortDirection = AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Descending.ToString();
                    }
                    %>
                    <th>
                        <a href="<%=Html.GenerateLoopBackUrl(true, new { ClientList_SortOn = cell.SortOn, ClientList_SortDirection = sortDirection })%>"><%=cell.Value%></a>
                        <%if (showFilterOption)
                            { %> 
                                <a href="#" id="<%:cell.ColumnIdentifier%>_link" class="noPdf">
                                    <span class="glyphicon glyphicon-filter" id="<%:cell.ColumnIdentifier%>_img"></span>
                                </a>
                                <%--<img src="<%= filterIcon%>" alt="add filter" id="<%:cell.ColumnIdentifier%>_img" />--%>
                        <%}%>
                    </th>
                <% }%> 
                </tr>

                <%Int32 count = 0;
                    foreach (var row in data.Rows)
                    { %>
                    <tr>
                        <%
                            foreach (var cell in row.Cells)
                            {
                                    if (cell.Hidden) { }
                                    else {%><td onclick="return clickDisableFunction();"><%=cell.Value%></td><%}
                            }
                        %>
                    </tr>
                    <%
                    count++;
                    } 
                    if (data.ShowTotal)
                    { %>
                    <tr>
                        <%
                            foreach (var cell in data.Total.Cells)
                            { 
                                %><td><strong><%=cell.Value%></strong></td><%
                            }
                        %>
                    </tr>
                <% }%>
                </table>

下面的 Java 是我试过的，它似乎可以工作

    function RedirectClientView()
{
    //document.location.href = $('Views_DropDownList').value;
    document.location.href = document.getElementById('Views_DropDownList').value;
}
var clickedOnce = false;

function clickDisableFunction()
{
    if (clickedOnce == true)
    {
        return false;
    };
    clickedOnce = true;
    document.getElementById('clientListTable').setAttribute("disabled","true")
};

但是虽然这会禁用表格中的链接，但不会给用户留下表格被禁用的印象。

正如我所说，我希望它在表格上方显示某种透明的灰色框。我如何使用 css 和/或 jquery 实现此目的

Answer 1

CSS:

.table-inactive {
    opacity: 0.6;
}

JavaScript:

var table = document.getElementById("clientListTable")
    table.className = table.className + " table-inactive";

或 jQuery:

var $table = $("#clientListTable");
    $table.addClass("table-inactive");

应该这样做，它不会覆盖表格，但它会随着不透明度而淡出。(将 CSS/JS 放在您需要/想要的地方)