访问特定表单元格

我有一个通过foreach（PHP）生成的表格问题是我想修改此表格上的某个特定单元格（红色）知道我无法添加类，我必须通过CSS样式访问特定表单元格

编辑： 我需要与.child类

确实添加样式的第一个和最后<td>，最后<tr>的，它是那么创建<tr>与.child类Ajax请求有时有2 <tr>，有时10 <tr>

.tb-child .child th, .tb-child .child td, .details-close { 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
tbody > tr.child:last-child > td:first-child { 
 
    border-radius: 4px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<div class="table-responsive table-padding tb-child"> 
 
    <table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info"> 
 
    <thead> 
 
     <tr> 
 
     <th></th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="5007963"> 
 
     <td id="5007963"></td> 
 
     <td> 
 
      <a rel="details">5007963</a> 
 
     </td> 
 
     <td>25</td> 
 
     <td data-sort="0" class="sorting_1"> 
 
      <div>25</div> 
 
     </td> 
 
     <td data-sort="68"> 
 
      <div>42</div> 
 
     </td> 
 
     <td data-sort="-16"> 
 
      <div>21</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
     <tr class="5012152"> 
 
     <td class="details-control details-close first-plan"></td> 
 
     <td> 
 
      <a rel="details">5012152</a> 
 
     </td> 
 
     <td>3000</td> 
 
     <td data-sort="-22.23"> 
 
      <div>2333</div> 
 
     </td> 
 
     <td data-sort="-22.2"> 
 
      <div>2334</div> 
 
     </td> 
 
     <td data-sort="-29.63"> 
 
      <div>2111</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
     <tr class="child 5012152"> 
 
     <th></th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th></th> 
 
     </tr> 
 
     <tr class="child 5012152"> 
 
     <td></td> 
 
     <td> 
 
      <a rel="bin"> 
 
      AZERTY1 
 
      </a> 
 
     </td> 
 
     <td>1000</td> 
 
     <td data-sort="66.7"> 
 
      <div>1667</div> 
 
     </td> 
 
     <td data-sort="16.7"> 
 
      <div>1167</div> 
 
     </td> 
 
     <td data-sort="44.4"> 
 
      <div>1444</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
     <tr class="child 5012152"> 
 
     <td style="background: red"></td> 
 
     <td> 
 
      <a rel="bin"> 
 
      AZERTY2 
 
      </a> 
 
     </td> 
 
     <td>1000</td> 
 
     <td data-sort="-33.3"> 
 
      <div>667</div> 
 
     </td> 
 
     <td data-sort="-33.3"> 
 
      <div>667</div> 
 
     </td> 
 
     <td data-sort="-66.7"> 
 
      <div>333</div> 
 
     </td> 
 
     <td style="background: red"></td> 
 
     </tr> 
 
     <tr class="5012277"> 
 
     <td id="5012277"></td> 
 
     <td> 
 
      <a rel="details">5012277</a> 
 
     </td> 
 
     <td>10</td> 
 
     <td data-sort="-30" class="sorting_1"> 
 
      <div>7</div> 
 
     </td> 
 
     <td data-sort="-30"> 
 
      <div>7</div> 
 
     </td> 
 
     <td data-sort="-30"> 
 
      <div>7</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

jsiddle

我试过几件事情，如：

tbody > tr.child:last-child > td:first-child { 
    border-radius: 4px 
}

但没有任何工程。怎么办？

来源

2017-10-17 Rocstar

该行总是在表中的相同位置？ – DaFois

'tbody tr.child：nth-last-child（2）td：first-child'将第二行的第一个红色单元作为目标，'tbody tr.child：nth-last-child（2）td：last -child'来定位最后一排的最后一个孩子。移除**儿童组合器**选择器'>'，因为这是针对直接的孩子。 – UncaughtTypeError

这将为你工作。

我已经使用nth-last-child(2)来将td标记为红色。

我添加的代码：

tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child { 
    border-radius: 4px; 
}

.tb-child .child th, .tb-child .child td, .details-close { 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child { 
 
    border-radius: 4px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<div class="table-responsive table-padding tb-child"> 
 
    <table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info"> 
 
    <thead> 
 
     <tr> 
 
     <th></th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="5007963"> 
 
     <td id="5007963"></td> 
 
     <td> 
 
      <a rel="details">5007963</a> 
 
     </td> 
 
     <td>25</td> 
 
     <td data-sort="0" class="sorting_1"> 
 
      <div>25</div> 
 
     </td> 
 
     <td data-sort="68"> 
 
      <div>42</div> 
 
     </td> 
 
     <td data-sort="-16"> 
 
      <div>21</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
     <tr class="5012152"> 
 
     <td class="details-control details-close first-plan"></td> 
 
     <td> 
 
      <a rel="details">5012152</a> 
 
     </td> 
 
     <td>3000</td> 
 
     <td data-sort="-22.23"> 
 
      <div>2333</div> 
 
     </td> 
 
     <td data-sort="-22.2"> 
 
      <div>2334</div> 
 
     </td> 
 
     <td data-sort="-29.63"> 
 
      <div>2111</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
     <tr class="child 5012152"> 
 
     <th></th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th></th> 
 
     </tr> 
 
     <tr class="child 5012152"> 
 
     <td></td> 
 
     <td> 
 
      <a rel="bin"> 
 
      AZERTY1 
 
      </a> 
 
     </td> 
 
     <td>1000</td> 
 
     <td data-sort="66.7"> 
 
      <div>1667</div> 
 
     </td> 
 
     <td data-sort="16.7"> 
 
      <div>1167</div> 
 
     </td> 
 
     <td data-sort="44.4"> 
 
      <div>1444</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
     <tr class="child 5012152"> 
 
     <td style="background: red"></td> 
 
     <td> 
 
      <a rel="bin"> 
 
      AZERTY2 
 
      </a> 
 
     </td> 
 
     <td>1000</td> 
 
     <td data-sort="-33.3"> 
 
      <div>667</div> 
 
     </td> 
 
     <td data-sort="-33.3"> 
 
      <div>667</div> 
 
     </td> 
 
     <td data-sort="-66.7"> 
 
      <div>333</div> 
 
     </td> 
 
     <td style="background: red"></td> 
 
     </tr> 
 
     <tr class="5012277"> 
 
     <td id="5012277"></td> 
 
     <td> 
 
      <a rel="details">5012277</a> 
 
     </td> 
 
     <td>10</td> 
 
     <td data-sort="-30" class="sorting_1"> 
 
      <div>7</div> 
 
     </td> 
 
     <td data-sort="-30"> 
 
      <div>7</div> 
 
     </td> 
 
     <td data-sort="-30"> 
 
      <div>7</div> 
 
     </td> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

但有些款式有哪些来自bootstarap CSS，所以如果你想通过右他们也你会必须在您的风格中使用!important。

样本 -

tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child { 
    border-radius: 4px !important; 
}

希望这是有益的给你。

来源

2017-10-17 12:22:04 weBBer

谢谢您花时间帮助我！但它并不真正在我的网站上工作，因为表是动态的，所以我不能把最后一个孩子（2）（有时有20）为什么当我把这个：“tbody> tr.child：nth-last-孩子> td：第一胎，tbody> tr.child：第n-last-child> td：最后孩子“它不起作用？ – Rocstar

@Rocstar你应该更新你的问题，以便我们可以解释这一点。这些单元格总是会变成红色，或者您只是将这些样式应用于重点，以便我们知道您想要定位哪些单元格？ – UncaughtTypeError

@Rocstar如果你想要设置'td'的动态数量，那么你将不得不使用'jquery'或'javascript'，但是如果''是动态的，并且你想要从最后一个'tr “要成为焦点，那么我的风格将起作用。在其他情况下，它不会。 – weBBer

访问特定表单元格

回答

相关问题