Question

由于课程background-color，我有一张表格，表格中的奇数行有table-striped。

我愿意为html中的表添加双击动作。如果双击background-color，则应更改tr行。当我双击奇数行时，我似乎无法覆盖background-color。我的代码出了什么问题？是否有其他方法可以使用jquery覆盖背景？

以下是我的代码：

CSS样式

.selected-hight {
        background-color: #FECA40;
    }    
.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
    background-color: #0e90d2;
    }

和JQuery方法。

$(function() {
    $("table tbody").on("dblclick",'tr', function() {
        var rows = $('table tbody tr');
        rows.removeClass('selected-hight');
        $(this).addClass('selected-hight');
    });
});

表的

和html代码：

<table class="table-striped">
    <thead>
        <tr>
            <td>head 1</td>
            <td>head 2</td>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>row 0, col 0</td>
            <td>row 0, col 1</td>
        </tr>
        <tr>
            <td>row 1, col 0</td>
            <td>row 0, col 1</td>
        </tr>
    <tbody>
</table>

Answer 1

是的，你可以覆盖。尝试添加一个新类以避免添加！important

$(function() {
    $("table tbody").on("dblclick",'tr', function() {
        var rows = $('table tbody tr');
        rows.removeClass('selected-hight');
        $(this).addClass('selected-hight');
    });
});

    .table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
        background-color: #0e90d2;
        }
       
        
        .table-striped tbody > tr.selected-hight > td, .table-striped tbody > tr.selected-hight > th{
          background-color: #FECA40;          
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table-striped">
    <thead>
        <tr>
            <td>head 1</td>
            <td>head 2</td>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>row 0, col 0</td>
            <td>row 0, col 1</td>
        </tr>
        <tr>
            <td>row 1, col 0</td>
            <td>row 0, col 1</td>
        </tr>
    <tbody>
</table>

Answer 2

您的CSS设置其他背景颜色比您添加的类更具体。见this小提琴。

而不仅仅是：

.selected-hight {
  background-color: #FECA40;
}

.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
  background-color: #0e90d2;
}

试试这个：

.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
  background-color: #0e90d2;
}

.table-striped tbody>tr.selected-hight>td,
.table-striped tbody>tr.selected-hight>th {
  background-color: #FECA40;
}

Answer 3

尝试此CSS并应用于表格元素。它会在点击以及onmouseover上改变背景颜色： -

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}
.table-fill {
  background: white;
  border-radius:3px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:18px;
  font-weight: 100;
  padding:5px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}

th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  padding:5px;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}

tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}

tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}

tr:nth-child(odd) td {
  background:#EBEBEB;
}

tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}

tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}

td {
  background:#FFFFFF;
  padding:5px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:14px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
   text-align: left;
}

th.text-center {
   text-align: center;
}

 th.text-right {
   text-align: right;
}

如何使用jquery

3 个答案: