Question

我有一堆动态创建的表行。它们交替背景颜色。我想知道是否有办法从该表行中的表数据元素中删除背景颜色。

<tr class='class1' id='row  value.roomID'> 
    <td>sBtn</td> 
    <td>value.jobName</td> 
    <td>value.woodType</td> 
    <td>value.finishColor</td> 
    <td>cBtn</td> 
</tr>

基本上我不想要sBtn和cBtn背后的背景。我知道我可以将类添加到表数据中。我只是不想导致我在我的代码中使用不同的jquery事件多次替换数据，并且更容易保持表行颜色并替换内部的表数据。

任何人都知道一个很好的方法。

Answer 1

您不必将课程应用于所有td，您可以将td定位到tr课程。

.class1 td{background:red}

.class1 td:first-child,
.class1 td:last-child{background:transparent;}

更新了示例

.background1 td{background:lightgray}
.background1 td:first-child,
.background1 td:last-child{background:transparent;}

.background2 td{background:lightblue}
.background2 td:first-child,
.background2 td:last-child{background:transparent;}


tr {
  text-align: center;
}
td {
  text-align: auto;
  width: 150px;
  margin: auto;
  justify-content: center;
}

button {
  width: 50px;
  text-align: center;
  margin: auto;
  max-height: 75%;
}

  <table>
  <thead>
      <tr>
        <td>Start</td>
        <td>Job Name</td>
        <td>Wood Type</td>
        <td>Finish Color</td>
        <td>Start</td>
      </tr>
  </thead>
  <tbody>
      <tr class="background1">
        <td><button>Start</button></td>
        <td>Some Job</td>
        <td>Some Wood</td>
        <td>Some Color</td>
        <td><button>Start</button></td>
      </tr>
    <tr class="background2">Some Color 2>
        <td><button>Start</button></td>
        <td>Some Job 2</td>
        <td>Some Wood 2</td>
        <td>Some Color 2</td>
        <td><button>Start</button></td>
      </tr>
    </tbody>
  </table>

Answer 2

使用td：first-child＆amp; TD：last-child

.class1 {
   background-color: lightgray;
}
.class2 {
  background-color: lightblue;
}
tr {
  text-align: center;
}
td {
  text-align: auto;
  width: 150px;
  margin: auto;
  justify-content: center;
}

button {
  width: 50px;
  text-align: center;
  margin: auto;
  max-height: 75%;
}

tbody tr td:first-child,
tbody tr td:last-child {
   background:white;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
  <table>
  <thead>
      <tr>
        <td>Start</td>
        <td>Job Name</td>
        <td>Wood Type</td>
        <td>Finish Color</td>
        <td>Start</td>
      </tr>
  </thead>
  <tbody>
  
   <tr class='class1' id='row  value.roomID'> 
    <td>sBtn</td> 
    <td>value.jobName</td> 
    <td>value.woodType</td> 
    <td>value.finishColor</td> 
    <td>cBtn</td> 
   </tr>
   
   <tr class='class2' id='row  value.roomID'> 
    <td>sBtn</td> 
    <td>value.jobName</td> 
    <td>value.woodType</td> 
    <td>value.finishColor</td> 
    <td>cBtn</td> 
   </tr>
   
  </tbody>
  </table>
</body>
</html>

Answer 3

您可以通过选择除第一个和最后一个$("tbody td:not(:nth-child(4n+1))")之外的所有列来为jquery实现此目标，此选择对于5列是正确的。 4n+1可以根据列数进行更改。

(ColumnCount-1)n +1

＆＃13;

$("tbody td:not(:nth-child(4n+1))").addClass("class1");

＆＃13;

.class1 {
   background-color: lightblue;
}

tr {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
  <table>
  <thead>
      <tr>
        <td>Start</td>
        <td>Job Name</td>
        <td>Wood Type</td>
        <td>Finish Color</td>
        <td>Start</td>
      </tr>
  </thead>
  <tbody>
  
   <tr id='row1'> 
    <td>sBtn</td> 
    <td>value.jobName</td> 
    <td>value.woodType</td> 
    <td>value.finishColor</td> 
    <td>cBtn</td> 
   </tr>
   
   <tr id='row2'> 
    <td>sBtn2</td> 
    <td>value.jobName2</td> 
    <td>value.woodType2</td> 
    <td>value.finishColor2</td> 
    <td>cBtn2</td> 
   </tr>
   
   
  </tbody>
  </table>
</body>
</html>

＆＃13;

从td中删除背景

3 个答案: