Question

我正在尝试使用jQuery和css规则更改表上第一个可见行的css样式。

当我更改偏移时，我想使用我的css规则以红色显示第一个可见的表TBODY行。

这是我的代码示例：

＆＃13;

$(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');
             }
        });
  })
});

＆＃13;

table tbody>tr{
  display:none;
}
table tbody>tr.is-visible{
  display:block;
}
table tr.is-visible:first-child{
    background-color: #f00;
}

＆＃13;

<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">
	<thead>
		<tr>
			<th>TH 1</th>
			<th>TH 2</th>
			<th>TH 3</th>
		</tr>
	</thead>
	<tbody>
		<tr class="is-visible" id="row-0">
			<td>0</td>
			<td>0</td>
			<td>0</td>
		</tr>
    
    <tr class="is-visible" id="row-1">
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
    
		<tr class="is-visible" id="row-2">
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
    
		<tr class="is-visible" id="row-3">
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
    
		<tr class="is-visible" id="row-4">
			<td>4</td>
			<td>4</td>
			<td>4</td>
		</tr>
    
		<tr class="is-visible" id="row-5">
			<td>5</td>
			<td>5</td>
			<td>5</td>
		</tr>

	</tbody>
</table>

＆＃13;

感谢您的帮助。

Answer 1

通过Pure css，它是不可能的： - Targeting first visible element with pure CSS

但是通过jQuery你可以这样做： -

＆＃13;

$(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');
       }
    });
    $(".is-visible:first").css({"background-color":"red"});
    $(".is-visible").not(":first").css({"background-color":"#ffffff"});
  })
});

＆＃13;

table tbody>tr{
  display:none;
}
table tbody>tr.is-visible{
  display:block;
}
table tr.is-visible:first-child{
    background-color: #f00;
}

＆＃13;

<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">
  <thead>
    <tr>
      <th>TH 1</th>
      <th>TH 2</th>
      <th>TH 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="is-visible" id="row-0">
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>

    <tr class="is-visible" id="row-1">
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>

    <tr class="is-visible" id="row-2">
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>

    <tr class="is-visible" id="row-3">
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>

    <tr class="is-visible" id="row-4">
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>

    <tr class="is-visible" id="row-5">
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>

  </tbody>
</table>

＆＃13;

Answer 2

你必须使用jQuery。请尝试以下代码。

$(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');
             }
             $(".is-visible").css({"background-color":"white"});
             $("#row-"+offset).css({"background-color":"red"});
        });
  })
});

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">
	<thead>
		<tr>
			<th>TH 1</th>
			<th>TH 2</th>
			<th>TH 3</th>
		</tr>
	</thead>
	<tbody>
		<tr class="is-visible" id="row-0">
			<td>0</td>
			<td>0</td>
			<td>0</td>
		</tr>
    
    <tr class="is-visible" id="row-1">
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
    
		<tr class="is-visible" id="row-2">
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
    
		<tr class="is-visible" id="row-3">
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
    
		<tr class="is-visible" id="row-4">
			<td>4</td>
			<td>4</td>
			<td>4</td>
		</tr>
    
		<tr class="is-visible" id="row-5">
			<td>5</td>
			<td>5</td>
			<td>5</td>
		</tr>

	</tbody>
</table>

您可以看到：https://jsfiddle.net/dkhny7t9/3/

为表上的第一个可见行重新应用css规则

2 个答案: