訪問特定表單元格

我有一個通過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

訪問特定表單元格

回答

相關問題