1
jQueryとCSSのルールを使用して、表の最初の表示行のCSSスタイルを変更しようとしています。テーブルの最初の表示行にCSSルールを再適用
私はオフセットを変更すると、私のCSSルールを使用して最初の可視テーブルTBODY行を赤で表示したいと考えています。
これは私のコードの例である：あなたの助けのための
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
})
});table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
\t <thead>
\t \t <tr>
\t \t \t <th>TH 1</th>
\t \t \t <th>TH 2</th>
\t \t \t <th>TH 3</th>
\t \t </tr>
\t </thead>
\t <tbody>
\t \t <tr class="is-visible" id="row-0">
\t \t \t <td>0</td>
\t \t \t <td>0</td>
\t \t \t <td>0</td>
\t \t </tr>
<tr class="is-visible" id="row-1">
\t \t \t <td>1</td>
\t \t \t <td>1</td>
\t \t \t <td>1</td>
\t \t </tr>
\t \t <tr class="is-visible" id="row-2">
\t \t \t <td>2</td>
\t \t \t <td>2</td>
\t \t \t <td>2</td>
\t \t </tr>
\t \t <tr class="is-visible" id="row-3">
\t \t \t <td>3</td>
\t \t \t <td>3</td>
\t \t \t <td>3</td>
\t \t </tr>
\t \t <tr class="is-visible" id="row-4">
\t \t \t <td>4</td>
\t \t \t <td>4</td>
\t \t \t <td>4</td>
\t \t </tr>
\t \t <tr class="is-visible" id="row-5">
\t \t \t <td>5</td>
\t \t \t <td>5</td>
\t \t \t <td>5</td>
\t \t </tr>
\t </tbody>
</table>感謝。
それは不可能ですピュアCSSを通じ