如何使用jquery更改html中的背景颜色

I have a table that odd lines in table have a origin background-colorbecause of class table-striped.

我有一个表,表中的奇数行有一个原始背景颜色,因为类表条带。

I am willing add double click action for a table in html. background-color of a line(tr) should be changed if double click on it. It seems I can't override the background-color when I double click on odd lines. What's wrong with my code? Is there another way to override the background by using jquery?

我愿意为html中的表添加双击动作。如果双击它,应更改一行(tr)的背景颜色。当我双击奇数行时,我似乎无法覆盖背景颜色。我的代码出了什么问题?是否有另一种方法来使用jquery覆盖背景?

Here are my code:

这是我的代码:

CSS style

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

---

and JQuery method.

和JQuery方法。

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

---

and html code of table:

和表的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>

3 个解决方案

#1

Yes you can override. Try to add a new class to avoid adding !important

是的,你可以覆盖。尝试添加一个新类以避免添加!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>

#2

Your CSS setting the other background-color is more specific than the class you add. See this fiddle.

您设置其他背景颜色的CSS比您添加的类更具体。看到这个小提琴。

Instead of just:

而不仅仅是:

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

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

Try this:

.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;
}

#3

Try this CSS and apply to table elements. It will change background color on click as well as onmouseover:-

试试这个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;
}