Question

我正在使用

<th class="none"></th>

隐藏数据表中的最后一列。 Datatable在第一列中创建一个按钮，以在子行中显示/隐藏此列。此按钮的颜色在responsive.bootstrap.min.css中设置：

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec }

我在第一列添加了一个自定义类，以根据行中的数据禁用该按钮：

.not-active { pointer-events: none; cursor: default; }

我根据某些行的内容通过C＃设置类。

<tr><td class='<%# DisableLink(Eval("InvoiceDate").ToString()) %>'><%# Eval("InvoiceNumber")%></td>

所有这些都按预期工作。

我现在想要做的是将 按钮的背景颜色设置为灰色，当td的类设置为.not-active 时，结束写背景颜色。

我试过了

.not-active > table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec }

和十几种不同的组合但似乎无法正确获得格式。

有什么建议吗？谢谢！

按要求添加FSFiddle：https://jsfiddle.net/yk06fbxa/3/

Answer 1

设置背景颜色的CSS规则是

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using SimpleWebApplication;
using System.Configuration;

namespace SimpleWebApplication
{
    /// <summary>
    /// Summary description for SimpleWebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    // [System.Web.Script.Services.ScriptService]
    public class SimpleWebService : System.Web.Services.WebService
    {


        [WebMethod]
        public List<tblStudent> getAllLINQ()
        {
            List<string> studentList = new List<string>();
            try
            {
                using (TestingEntities database = new TestingEntities())
                {
                    var studentData = (from table in database.tblStudents select table).Select(u => new { u.Name });
                    studentList = studentData.ToList();
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
            return studentList;
        }


    }
}

要在table.dataTable.dtr-inline.collapsed tbody td:first-child:before, table.dataTable.dtr-inline.collapsed tbody th:first-child:before { ... background-color: #31b131; }拥有类<td>时覆盖此内容，您可以像这样修改它：

not-active

查看演示here。我已将第一行的td设置为不具有table.dataTable.dtr-inline.collapsed tbody td.not-active:first-child:before, table.dataTable.dtr-inline.collapsed tbody th.not-active:first-child:before { background-color:#dddddd; }类，以确保它仅适用于not-active类。

DataTables隐藏/显示隐藏的列按钮CSS样式

1 个答案: