时间戳

首页 > 解决方案 > 限制对特定表 ID 的更改

javascript - 限制对特定表 ID 的更改

问题描述

我正在尝试为 html 表做一个非常简单的复选框输入。我的页面中有 3 个表格，如果我取消选中“.PrenomTCG”会出现问题，它会将所有结果（Prenom）隐藏在 3 个表格中。

那么，是否可以在我的 jQuery 函数中分配一个 id ？例如“prenomTable”

var $ = jQuery;
// Checkbox
$(document).ready(function () {
    // Prénom TCG
    $('#prenomEpiques').change(function () {
        if (this.checked) 
            $('.prenomEpique').fadeIn('slow');
        else 
            $('.prenomEpique').fadeOut('slow');
    });
	 $('#prenomEpiques').change();    
    // Prénom TCG
    $('#prenomTCG').change(function () {
        if (this.checked) 
            $('.prenomTCG').fadeIn('slow');
        else 
            $('.prenomTCG').fadeOut('slow');
    });
	 $('#prenomTCG').change();       
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
<input type="checkbox" id="prenomEpiques" class="input_checkbox" checked>When unchecked, I want to hide only rows in the <b>Table 1</b>.
</label><br/>
<label class="checkbox-inline">
<input type="checkbox" id="prenomTCG" class="input_checkbox" checked>When unchecked, I want to hide only rows in the <b>Table 2</b>.
</label>
<h1>Table 1</h1>
<table id="tableauPrenoms1">
   <thead>
      <tr id="header">
         <th>Nom</th>
         <th>Prénom</th>
      </tr>
   </thead>
   <tbody>
      <tr class="prenomTCG">
         <td>Jean</td>
         <td>Pierre</td>
      </tr>
      <tr class="prenomEpique">
         <td>Michel</td>
         <td>Francis</td>
      </tr>
   </tbody>
</table>
<h1>Table 2</h1>
<table id="tableauPrenoms2">
   <thead>
      <tr id="header">
         <th>Nom</th>
         <th>Prénom</th>
      </tr>
   </thead>
   <tbody>
      <tr class="prenomTCG">
         <td>Françoise</td>
         <td>Léa</td>
      </tr>
      <tr class="prenomEpique">
         <td>Helene</td>
         <td>Marie</td>
      </tr>
   </tbody>
</table>

标签： javascriptjquery

解决方案

使用更具体的选择器#tableauPrenoms1 .prenomEpique.

var $ = jQuery;
// Checkbox
$(document).ready(function() {
  // Prénom TCG
  $('#prenomEpiques').change(function() {
    if (this.checked)
      $('#tableauPrenoms1 .prenomEpique').fadeIn('slow');
    else
      $('#tableauPrenoms1 .prenomEpique').fadeOut('slow');
  });
  $('#prenomEpiques').change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
<input type="checkbox" id="prenomEpiques" class="input_checkbox" checked>When unchecked, I want to hide only rows in the Table 1.
</label>
<h1>Table 1</h1>
<table id="tableauPrenoms1">
  <thead>
    <tr id="header">
      <th>Nom</th>
      <th>Prénom</th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td>Jean</td>
      <td>Pierre</td>
    </tr>
    <tr class="prenomEpique">
      <td>Michel</td>
      <td>Francis</td>
    </tr>
  </tbody>
</table>
<h1>Table 2</h1>
<table id="tableauPrenoms2">
  <thead>
    <tr id="header">
      <th>Nom</th>
      <th>Prénom</th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td>Françoise</td>
      <td>Léa</td>
    </tr>
    <tr class="prenomEpique">
      <td>Helene</td>
      <td>Marie</td>
    </tr>
  </tbody>
</table>

推荐阅读