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

how to change background color in html by using jquery

本文关键字：背景 颜色 html 何使用 jquery 更改      更新时间：2023-09-26

我有一个表，表中的奇数行由于类table-striped而具有原点background-color。

我愿意为html中的表添加双击操作。双击一行（tr）的background-color应该更改。双击奇数行时，我似乎无法覆盖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>

是的，您可以覆盖。尝试添加一个新类以避免添加！重要

$(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>

您的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;
}

试试这个：

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

试试这个CSS并应用于表元素。它将在点击和鼠标悬停时更改背景颜色：-

.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;
}
相关文章：