Мне нужно показать еще одну таблицу на клик. У меня есть следующая таблица в foreach, поэтому будет несколько кнопок.

<table class="table" id="call-table">
<tr>
    <th>Show more buttons</th>
</tr>
<tbody>
        <tr>
            <td class="show-more-button">Show more</td> //It will open first tbody
        <tr>
        <tr>
            <td class="show-more-button">Show more</td> //It will open second tbody 
        <tr>

        <tbody class="show-more"> //First tbody
            <tr>
                <th scope="col">Data</th>
                <th scope="col">Value</th>
            </tr>

            <tr>
                <td>Some data....</td>
                <td>A value..</td>
            </tr>
        </tbody>

        <tbody class="show-more"> //Second tbody
            <tr>
                <th scope="col">Data</th>
                <th scope="col">Value</th>
            </tr>

            <tr>
                <td>Some more data....</td>
                <td>Another value..</td>
            </tr>
        </tbody>

</tbody>

Я использую Python с DjangoFramework. И это сценарий, который я придумал. Но это работает только для изменения текста, но не показывает tbody.

<script>
$(document).on("click", ".show-more-button", function() {

  if ($(this).text() == "Show more") {
    $(this).text("Show less");
    $(this).parent().children(".show-more").style.display = "block";
  } else {
    $(this).text("Show more");
    $(this).parent().children(".show-more").style.display = "block";
  } 
});
</script>

И в CSS:

.show-more {
  display: none;
}

Какую ошибку я имею в моем сценарии?

0
popcorn 26 Окт 2019 в 10:46

2 ответа

Лучший ответ

Потому что $(this).parent() будет <tr>. Например, вы можете использовать ближайший и найти первого родителя table, и вы сможете использовать .children('.show-more') . Смотрите пример ниже.

$(document).on("click", ".show-more-button", function() {
  if ($(this).text() == "Show more") {
    $(this).text("Show less");
    $(this).closest('table').children(".show-more").css('display', 'block');
  } else {
    $(this).text("Show more");
    $(this).closest('table').children(".show-more").css('display', 'none');
  } 
});
.show-more { display: none; }
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  
  <tr>
    <td class="show-more-button">Show more</td>
  <tr>
  
  <tbody class="show-more">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>27</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>Lo</td>
      <td>43</td>
    </tr>
    <tr>
      <td>Linda</td>
      <td>Morrison</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

Пример изменился, и я подготовил новое решение.

$(document).on("click", ".show-more-button", function() {
  var forId = $(this).data('more-for');
  var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');

  if ($(this).text() == "Show more") {
    $(this).text("Show less");
    $showMoreElement.css('display', 'block');
  } else {
    $(this).text("Show more");
    $showMoreElement.css('display', 'none');
  } 
});
.show-more {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
  <tr>
    <th>Show more buttons</th>
  </tr>
  
  <tbody>
    <tr>
      <!--It will open first tbody -->
      <td class="show-more-button" data-more-for="1">Show more</td>
    </tr>
    <tr>
      <!--It will open second tbody  -->
      <td class="show-more-button" data-more-for="2">Show more</td>
    </tr>
  </tbody>
  
  <!--First tbody -->
  <tbody class="show-more" data-more-id="1">
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Value</th>
    </tr>
    <tr>
      <td>Some data....</td>
      <td>A value..</td>
    </tr>
  </tbody>

  <!--Second tbody-->
  <tbody class="show-more" data-more-id="2">
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Value</th>
    </tr>
    <tr>
      <td>Some more data....</td>
      <td>Another value..</td>
    </tr>
  </tbody>
</table>
1
iwonz 26 Окт 2019 в 08:52

Здесь два пути. Выбери кого угодно. Это работает хорошо:

$(function(){
    $('.show-more-button').click(function(){
       var b_id = $(this).data('id');
       
       var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
       $(this).text(b_text);
       
       $('.shm'+b_id).toggle();
    });
    
    $('.show-more-button2').click(function(){
       var b_id = $(this).data('id');
       
       var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
       $(this).text(b_text);
       
       $('.shm'+b_id+'_2').toggle();
       th_sh();
    });
})

function th_sh(){
    var o = 0;
    $('#call-table2').find('.shows').each(function(){
     
     var u = $(this).css('display') == 'table-row' ? 1 : 0;  
     o = o + u;
    });
   
    o>0 ? $('.th_disp').css('display','block') : $('.th_disp').css('display','none');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="call-table">
     <thead>
        <tr>
            <th>Show more buttons</th>
            <th></th>
        </tr> 
    </thead>
        <tr>
            <td class="show-more-button" data-id="1">Show more</td> <!--//It will open first tbody-->
            <td></td>
        <tr>
        <tr>
            <td class="show-more-button" data-id="2">Show more</td><!--//It will open second tbody -->
            <td></td> 
        <tr>
        <tr>
            <td class="show-more-button" data-id="3">Show more</td><!--//It will open second tbody -->
            <td></td> 
        <tr>
<tbody>
        <!--<tbody class="show-more"> //First tbody-->
            <tr class="shm1" style="display:none;">
                <th scope="col">Data1</th>
                <th scope="col">Value</th>
            </tr>

            <tr class="shm1" style="display:none;">
                <td>Some data..1..</td>
                <td>A value..</td>
            </tr>
        <!--</tbody>//Second tbody--> 
            <tr class="shm2" style="display:none;">
                <th scope="col">Data2</th>
                <th scope="col">Value</th>
            </tr>

            <tr class="shm2" style="display:none;">
                <td>Some data..2..</td>
                <td>A value..</td>
            </tr>
        <!--</tbody>//Second tbody--> 
            <tr class="shm3" style="display:none;">
                <th scope="col">Data3</th>
                <th scope="col">Value</th>
            </tr>

            <tr class="shm3" style="display:none;">
                <td>Some data..3..</td>
                <td>A value..</td>
            </tr>
 
</tbody>
</table>

<br><hr><br>

<table class="table table-striped" id="call-table2">
     <thead>
        <tr>
            <th>Show more buttons</th>
            <th></th>
        </tr> 
    </thead>
        <tr>
            <td class="show-more-button2" data-id="1">Show more</td> <!--//It will open first tbody-->
            <td></td>
        <tr>
        <tr>
            <td class="show-more-button2" data-id="2">Show more</td><!--//It will open second tbody -->
            <td></td> 
        <tr>
        <tr>
            <td class="show-more-button2" data-id="3">Show more</td><!--//It will open second tbody -->
            <td></td> 
        <tr>
<tbody>
        <!--<tbody class="show-more"> //First tbody-->
            <tr class="th_disp" style="display:none;">
                <th scope="col">Data</th>
                <th scope="col">Value</th>
            </tr>

            <tr class="shm1_2 shows" style="display:none;">
                <td>Some data..1..</td>
                <td>A value..</td>
            </tr>
        <!--</tbody>//Second tbody--> 
           

            <tr class="shm2_2 shows" style="display:none;">
                <td>Some data..2..</td>
                <td>A value..</td>
            </tr>
        <!--</tbody>//Second tbody--> 
        

            <tr class="shm3_2 shows" style="display:none;">
                <td>Some data..3..</td>
                <td>A value..</td>
            </tr>
 
</tbody>
</table>
0
Aksen P 26 Окт 2019 в 09:03
58568973