隐藏并显示特定行？

时间：2016-01-27 11:21:35

标签： javascript jquery html

当我点击显示并隐藏该行的图像时，它会显示所有子行，并与隐藏相同。

问题清楚地在代码段中定义。

$(".sub").hide();

function diffImage(img) {
  if (img.src.match("minus")) {
    img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
    // $(img).closest('tr').next('.sub').hide();
    $(".sub").hide();
  } else {
    img.src = "http://www.bls.gov/images/icons/icon_small_minus.gif";
    // $(img).closest('tr').next('.sub').show();
    $(".sub").show();
  }
}

! function($) {
  $(".sub").hide();
  $(document).on("click", "ul.nav li.parent > a > span.icon", function() {
    // $(this).find('em:first').toggleClass("glyphicon-minus");	  
    $(this).show();
    // $('.sub').show();
  });
  $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table style="width:100%;" data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
  <thead>
    <tr>
      <th>&nbsp;&nbsp;</th>
      <th data-checkbox="true"></th>
      <th data-field="state" data-sortable="true">Category Name</th>
      <th data-field="state" data-sortable="true">Product Image</th>
      <th data-field="state" data-sortable="true">Product Name</th>
      <th data-field="state" data-sortable="true">Seller Name</th>
      <th data-field="state" data-sortable="true">Price</th>
      <th data-field="state" data-sortable="true">Last Price 1</th>
      <th data-field="state" data-sortable="true">Last Price 2</th>
      <th data-field="state" data-sortable="true">Seller Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td>&nbsp;&nbsp;</td>
      <td>
        <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick="diffImage(this)">
      </td>
      <td>
        <p>nighty</p>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;"></object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p>559</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>4.8</p>
      </td>
    </tr>


    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979">
            <object data="http://n1.sdlcdn.com/imgs/b/b/w/Kanika-Pink-Satin-Nighty-SDL202281664-1-f3a2f.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979">
          <p>Kanika Pink Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>r. s. enterprises</p>
      </td>
      <td>
        <p class="tab">291</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.9</p>
      </td>
    </tr>
    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p class="tab">559</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.8</p>
      </td>
    </tr>


    <tr>

      <td>&nbsp;&nbsp;</td>
      <td>
        <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick="diffImage(this)">
      </td>
      <td>
        <p>nighty</p>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;"></object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p>559</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>4.8</p>
      </td>
    </tr>


    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p class="tab">559</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.8</p>
      </td>
    </tr>






  </tbody>
</table>

我只想点击主行然后只显示或隐藏子行？

2 个答案:

答案 0 :(得分：2)

你必须这样做

＆＃13;
＆＃13; 
$(".sub").hide();

function diffImage(img) {
  if (img.src.match("minus")) {
    img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";   
     $(img).closest('tr').nextUntil("tr:not(.sub)").hide();
  } else {
    img.src = "http://www.bls.gov/images/icons/icon_small_minus.gif";          
     $(img).closest('tr').nextUntil("tr:not(.sub)").show();               
  }
}

! function($) {
  $(".sub").hide();  
  $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table style="width:100%;" data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
  <thead>
    <tr >
      <th>&nbsp;&nbsp;</th>
      <th data-checkbox="true"></th>
      <th data-field="state" data-sortable="true">Category Name</th>
      <th data-field="state" data-sortable="true">Product Image</th>
      <th data-field="state" data-sortable="true">Product Name</th>
      <th data-field="state" data-sortable="true">Seller Name</th>
      <th data-field="state" data-sortable="true">Price</th>
      <th data-field="state" data-sortable="true">Last Price 1</th>
      <th data-field="state" data-sortable="true">Last Price 2</th>
      <th data-field="state" data-sortable="true">Seller Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent">

      <td>&nbsp;&nbsp;</td>
      <td>
        <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick="diffImage(this)">
      </td>
      <td>
        <p>nighty</p>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;"></object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p>559</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>4.8</p>
      </td>
    </tr>


    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979">
            <object data="http://n1.sdlcdn.com/imgs/b/b/w/Kanika-Pink-Satin-Nighty-SDL202281664-1-f3a2f.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979">
          <p>Kanika Pink Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>r. s. enterprises</p>
      </td>
      <td>
        <p class="tab">291</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.9</p>
      </td>
    </tr>
    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p class="tab">559</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.8</p>
      </td>
    </tr>


    <tr class="parent">

      <td>&nbsp;&nbsp;</td>
      <td>
        <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick="diffImage(this)">
      </td>
      <td>
        <p>nighty</p>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;"></object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p>559</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>4.8</p>
      </td>
    </tr>


    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p class="tab">559</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.8</p>
      </td>
    </tr>






  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我更喜欢使用jQuery绑定onclick事件，而不是添加内联on('click')事件。

单击图像时，我们会找到其父级（表格单元格）和父级（表格行）。

接下来，我们选择所有表行，直到找到没有.sub类的行。我们切换了他们的观点。

$(".sub").hide();


$('.image1').on('click', function() {
  var elem = $(this) ,
      img = elem.attr('src') ,
      parent = $(this).parent().parent();
  
  if( img.match('minus') ) { elem.attr('src', 'http://www.bls.gov/images/icons/icon_small_plus.gif' ); }
  else { elem.attr('src', 'http://www.bls.gov/images/icons/icon_small_minus.gif' ); }
  parent.nextUntil('tr:not(.sub)').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table style="width:100%;" data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
  <thead>
    <tr>
      <th>&nbsp;&nbsp;</th>
      <th data-checkbox="true"></th>
      <th data-field="state" data-sortable="true">Category Name</th>
      <th data-field="state" data-sortable="true">Product Image</th>
      <th data-field="state" data-sortable="true">Product Name</th>
      <th data-field="state" data-sortable="true">Seller Name</th>
      <th data-field="state" data-sortable="true">Price</th>
      <th data-field="state" data-sortable="true">Last Price 1</th>
      <th data-field="state" data-sortable="true">Last Price 2</th>
      <th data-field="state" data-sortable="true">Seller Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td>&nbsp;&nbsp;</td>
      <td>
        <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1">
      </td>
      <td>
        <p>nighty</p>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;"></object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p>559</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>4.8</p>
      </td>
    </tr>


    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979">
            <object data="http://n1.sdlcdn.com/imgs/b/b/w/Kanika-Pink-Satin-Nighty-SDL202281664-1-f3a2f.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979">
          <p>Kanika Pink Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>r. s. enterprises</p>
      </td>
      <td>
        <p class="tab">291</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.9</p>
      </td>
    </tr>
    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p class="tab">559</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.8</p>
      </td>
    </tr>


    <tr>

      <td>&nbsp;&nbsp;</td>
      <td>
        <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1">
      </td>
      <td>
        <p>nighty</p>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;"></object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p>559</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>updating</p>
      </td>
      <td>
        <p>4.8</p>
      </td>
    </tr>


    <tr class="sub" style="display: table-row;">
      <td></td>
      <td>&nbsp;&nbsp;</td>
      <td>
      </td>
      <td>
        <p>
          <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
            <object data="http://n4.sdlcdn.com/imgs/a/v/c/Masha-Radiant-Combo-of-Purple-SDL825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;">
              <img src="./Snapdeal- Comprice Solution_files/photo_na.jpg" style="width:45px;height:45px;">
            </object>
          </a>
        </p>
      </td>
      <td>
        <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029">
          <p>Masha Purple Satin Nighty</p>
        </a>
      </td>
      <td>
        <p>b boy body wears</p>
      </td>
      <td>
        <p class="tab">559</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">updating</p>
      </td>
      <td>
        <p class="tab">4.8</p>
      </td>
    </tr>






  </tbody>
</table>

相关问题
最新问题