Question

I'm trying to hide table rows when a tickbox is checked. I have managed to get it working, but it will only hide the first instance of the id. Could someone direct me in to changing the js so it will hide all with matching id.

JSFIDDLE

 $(document).ready(function() {
   $('#checkbox1').change(function() {
     if (!this.checked)

       $('#tierPoints').fadeIn('slow');
     else
       $('#tierPoints').fadeOut('slow');
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan=2>
      <input type="checkbox" id="checkbox1">Show/Hide</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints">
    <td>71</td>
    <td>1000</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints">
    <td>73</td>
    <td>2000</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints">
    <td>75</td>
    <td>3000</td>
  </tr>
  <!-- End Of Row -->

</table>

Answer 1

在HTML中，id必须是唯一的。有关详细信息，请参阅www.w3.org...。

尝试将id="tiersPoints"更改为class="tiersPoints"。

Answer 2

您需要拥有唯一的@Configuration public class LiquibaseDataSourceConfiguration { private static final Logger LOG = LoggerFactory.getLogger(LiquibaseDataSourceConfiguration.class); @Autowired private LiquibaseDataSourceProperties liquibaseDataSourceProperties; @LiquibaseDataSource @Bean public DataSource liquibaseDataSource() { DataSource ds = DataSourceBuilder.create() .username(liquibaseDataSourceProperties.getUser()) .password(liquibaseDataSourceProperties.getPassword()) .url(liquibaseDataSourceProperties.getUrl()) .driverClassName(liquibaseDataSourceProperties.getDriver()) .build(); if (ds instanceof org.apache.tomcat.jdbc.pool.DataSource) { ((org.apache.tomcat.jdbc.pool.DataSource) ds).setInitialSize(1); ((org.apache.tomcat.jdbc.pool.DataSource) ds).setMaxActive(2); ((org.apache.tomcat.jdbc.pool.DataSource) ds).setMaxAge(1000); ((org.apache.tomcat.jdbc.pool.DataSource) ds).setMinIdle(0); ((org.apache.tomcat.jdbc.pool.DataSource) ds).setMinEvictableIdleTimeMillis(60000); } else { // warnings or exceptions, whatever you prefer } LOG.info("Initialized a datasource for {}", liquibaseDataSourceProperties.getUrl()); return ds; } }。在这种情况下使用ids：

classes

$(document).ready(function() {
   $('#checkbox1').change(function() {
     if (!this.checked)

       $('.tierPoints').fadeIn('slow');
     else
       $('.tierPoints').fadeOut('slow');
   });
 });

Answer 3

id 在您的网页中应该是不同的。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan=2>
      <input type="checkbox" id="checkbox1">Show/Hide</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints1">
    <td>71</td>
    <td>1000</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints2">
    <td>73</td>
    <td>2000</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints3">
    <td>75</td>
    <td>3000</td>
  </tr>
  <!-- End Of Row -->

</table>

＆＃13;

Answer 4

这是解决方案：

正如我在评论中提到的：您需要使用tierPoints类。你不能多个具有相同身份的tr

＆＃13;

$(document).ready(function () {
    $('#checkbox1').change(function () {
        if (!this.checked) 
        
        $('.tierPoints').fadeIn('slow');
        else 
        $('.tierPoints').fadeOut('slow');
    });
});

＆＃13;

input[type=checkbox]{padding:0; margin:0;}


td, th {
  background: #ddd;
  color: #000;
  padding: 2px 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan=2><input type="checkbox" id="checkbox1">Show/Hide</td>
</tr>
<!-- End Of Row -->

<tr class="tierPoints">
<td>71</td>
<td>1000</td>
</tr>
<!-- End Of Row --> 

<tr class="tierPoints">
<td>73</td>
<td>2000</td>
</tr>
<!-- End Of Row --> 

<tr class="tierPoints">
<td >75</td>
<td>3000</td>
</tr>
<!-- End Of Row --> 

</table>

＆＃13;

Answer 5

试试这个。按id更改class。根据定义，Id是唯一的。

$(document).ready(function() {
   $('#checkbox1').change(function() {
     if (!this.checked)

       $('.tierPoints').fadeIn('slow');
     else
       $('.tierPoints').fadeOut('slow');
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan=2>
      <input type="checkbox" id="checkbox1">Show/Hide</td>
  </tr>
  <!-- End Of Row -->

  <tr class="tierPoints">
    <td>71</td>
    <td>1000</td>
  </tr>
  <!-- End Of Row -->

  <tr class="tierPoints">
    <td>73</td>
    <td>2000</td>
  </tr>
  <!-- End Of Row -->

  <tr class="tierPoints">
    <td>75</td>
    <td>3000</td>
  </tr>
  <!-- End Of Row -->

</table>

Answer 6

您需要使用＆＃34; 类＆＃34;选择器而不是 ID 选择器，ID必须是唯一的。您可以拥有多个具有相同类名的元素。

＆＃13;

     $(document).ready(function() {
       $('#checkbox1').change(function() {
         if (!this.checked)

           $('.tierPoints').fadeIn('slow');
         else
           $('.tierPoints').fadeOut('slow');
       });
     });

＆＃13;

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
      <tr>
        <td colspan=2>
          <input type="checkbox" id="checkbox1">Show/Hide</td>
      </tr>
      <!-- End Of Row -->

      <tr class="tierPoints">
        <td>71</td>
        <td>1000</td>
      </tr>
      <!-- End Of Row -->

      <tr class="tierPoints">
        <td>73</td>
        <td>2000</td>
      </tr>
      <!-- End Of Row -->

      <tr class="tierPoints">
        <td>75</td>
        <td>3000</td>
      </tr>
      <!-- End Of Row -->

    </table>

＆＃13;

Hiding table rows with checkbox

6 个答案: