Question

我会尝试尽可能具体。当鼠标使用所有CSS悬停在它们上方时，我有一个表格可以完美地突出显示行。我希望用户能够点击一行并保持突出显示直到另一行被点击。下面是一些示例代码和我用来突出显示的CSS。作为参考，这是一个解释......的MVC应用程序。

@foreach (var item in Model) { }

......开头

＆＃13;

function HilightRowOnClick() {
    //alert($(row).closest('tr').index())

    $(document).ready(function () {
        $('tr').click(function () {
            //if (this.style.background == "" || this.style.background == "#badecc") {
            if (this.style.backgroundColor == "#badecc") {
                alert($("Color is normal?"));
                $(this).css('background', 'burlywood');
            }
            else {
                $(this).css('background', '#badecc');
                alert("Color is not normal?");
            }
        });
    });
}

＆＃13;

.DBTable {
    width: 100%;
}


.DBToprow {
    font-size: 180%;
    font-weight: 600;
}


.DBTable td {
    font-size: 50%;
    padding: 7px;
}


.DBTable th {
    border-style: solid;
    border-width: 1px;
    padding: 7px;
}


.DBTable tr {
    background: #badecc;
    border-style: solid;
    border-width: 1px;
}

.DBTable tr:hover {
    background-color: burlywood;
}

＆＃13;

<table class="DBTable">
    <tr class="DBToprow">
        <td></td>
        <td>
            @Html.DisplayNameFor(model => model.ClientID)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.Active)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.BankID)
        </td>
    </tr>

    @foreach (var item in Model)
    {
        <tr onclick="HilightRowOnClick()">
            <th>
                @Html.DisplayFor(modelItem => item.ClientID)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.Active)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.BankID)
            </th>
        </tr>
    }
</table>

＆＃13;

Answer 1

在CSS中创建一个名为highlight（或类似的东西）的类，然后在单击它时将该类附加到您的行。因此，它应该做的是从所有表行中删除高亮类，然后将其添加到需要突出显示的那一行中。将此传递给onclick函数，如下所示：

onclick="HilightRowOnClick(this)"

然后使用下面的功能。我使用了你的函数名称：

function HilightRowOnClick(el) {
    $('tr').removeClass('highlight');
    $(el).addClass('highlight');
}

然后是highlight类的CSS：

.DBTable tr.highlight {
    background: burlywood;
}

Answer 2

＆＃13;

    $(document).ready(function () {
        $('tr').click(function () {
            $('tr').removeClass("clicked");
            $(this).addClass("clicked");
        });
    });

＆＃13;

.DBTable {
    width: 100%;
}


.DBToprow {
    font-size: 180%;
    font-weight: 600;
}


.DBTable td {
    font-size: 50%;
    padding: 7px;
}


.DBTable th {
    border-style: solid;
    border-width: 1px;
    padding: 7px;
}


.DBTable tr {
    background: #badecc;
    border-style: solid;
    border-width: 1px;
}

.DBTable tr.clicked {
    background: burlywood;
    border-style: solid;
    border-width: 1px;
}



.DBTable tr:hover {
    background-color: burlywood;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="DBTable">
    <tr class="DBToprow">
        <td></td>
        <td>
            @Html.DisplayNameFor(model => model.ClientID)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.Active)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.BankID)
        </td>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <th>
                @Html.DisplayFor(modelItem => item.ClientID)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.Active)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.BankID)
            </th>
        </tr>
    }
</table>

＆＃13;

Answer 3

function HilightRowOnClick() {
    //alert($(row).closest('tr').index())

    $(document).ready(function () {
        $("tr").click(function () {
              console.log(this.style.backgroundColor);
            //if (this.style.background == "" || this.style.background == "#badecc") {
            if (this.style.backgroundColor == 'rgb(186, 222, 204)') {
                console.log('#1');
                this.style.backgroundColor = 'red';
            }
            else {
                console.log('#2');
                this.style.backgroundColor = '#badecc';
                
            }
        });
    });
}

.DBTable {
    width: 100%;
}


.DBToprow {
    font-size: 180%;
    font-weight: 600;
}


.DBTable td {
    font-size: 50%;
    padding: 7px;
}


.DBTable th {
    border-style: solid;
    border-width: 1px;
    padding: 7px;
}


.DBTable tr {
    background: #badecc;
    border-style: solid;
    border-width: 1px;
}

.DBTable tr:hover {
    background-color: burlywood;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="DBTable">
    <tr class="DBToprow">
        <td></td>
        <td>
            @Html.DisplayNameFor(model => model.ClientID)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.Active)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.BankID)
        </td>
    </tr>

    @foreach (var item in Model)
    {
        <tr onclick="HilightRowOnClick()">
            <th>
                @Html.DisplayFor(modelItem => item.ClientID)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.Active)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.BankID)
            </th>
        </tr>
    }
</table>

诀窍就是使用rgb backGround，代码不完整 ..我只想告诉你另一种方法来做你想要的。即使你使用'this'来选择元素......条件也不能识别十六进制。

使用css悬停时突出显示表行

3 个答案: