當點擊鏈接時需要禁用表格

我有一個包含鏈接的引導程序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的

來源

2014-09-30 murday1983

您是否嘗試過對桌子使用'fadeIn'效果？ – 2014-09-30 08:06:02

@TusharRaj，這不就完全刪除表嗎？ – murday1983 2014-09-30 08:13:48

我編輯了我的代碼...你是對的..它會完全「淡出」桌子。 – 2014-09-30 08:26:02

決定使用完美的模式

來源

2014-10-07 11:31:32 murday1983

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放在你需要/想要的地方）

來源

2014-09-30 08:12:56

試試這個。我在寫一個通用的解決方案。希望這有助於： -

Lets say your bootstrap table contains 3 links

首個解決方案：modal-backdrop in

我猜你是在你的應用程序bootstrap.css。請牢記： - bootstrap3在中提供模態背景。您<table>這樣前添加含有該類一個div： -

$("#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'}); });

希望這會幫助你。

乾杯！

來源

2014-09-30 08:16:32

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

};

來源

2014-09-30 08:17:55 himanshu

只需將表格的不透明度降低到一半，然後將鏈接文本的顏色設置爲灰色等一些光線，以便它可以給出禁用的感覺。

來源

2014-09-30 08:33:58 freakywebix

當點擊鏈接時需要禁用表格

回答

相關問題