Нужно отключить таблицу при нажатии на ссылку

Question

У меня есть таблица загрузок 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") 
}; 

Но хотя это отключает ссылки в таблице, это не дает пользователю впечатление t он отключен.

Как я уже сказал, я хочу, чтобы он отображал прозрачный серый квадрат над столом. Как достичь этого с помощью CSS и/или JQuery

Answer 1

Решил использовать modal, который отлично работает

Answer 2

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"); 

Это должно сделать это, это Безразлично 't закрываем стол, но он будет исчезать с непрозрачностью. (поместите CSS/JS там, где вам нужно/нужно)

Answer 3

Попробуйте это. Я пишу общее решение. Надеюсь, что это может помочь: -

Lets say your bootstrap table contains 3 links

Первое решение:modal-backdrop in

Я думаю, вы имеете bootstrap.css в приложении. Помня об этом: - Существует класс, который bootstrap3 предоставляет modal-backdrop в. Добавьте DIV, содержащие этот класс перед вашим <table> как это: -

$("#lnk1,#lnk2,#lnk3").on("click",function(){ 

    $("#tableId").before("<div class='modal-backdrop in'></div>"); 

}); 

У меня есть личный опыт работы с этой функцией.

Второго решение:Opacity

$("#lnk1,#lnk2,#lnk3").on("click",function(){ 

    $("#tableId").css({'opacity':'0.4'}); 

}); 

Надеется, что это поможет вам.

Cheers !!

Answer 4

function clickDisableFunction() 
{ 
    if (clickedOnce == true) 
    { 
     return false; 
    }; 
    clickedOnce = true; 
    $("#clientListTable").css("opacity":"0.6"); 
    document.getElementById('clientListTable').setAttribute("disabled","true") 

}; 

Answer 5

Просто Капля непрозрачности стола до половины, а затем сделать цвет текста ссылки на какой-то свет, как серые, так что она может дать ощущение, как инвалиды.