Блог

Главная - Вопросы по программированию - Переключение плюс / минус одной кнопки для отображения и скрытия таблицы

Переключение плюс / минус одной кнопки для отображения и скрытия таблицы

#javascript #html #css #bootstrap-4

#javascript #HTML #css #bootstrap-4

Вопрос:

 $(document).ready(function() {
  $("#t1").hide(); // hide table by default
  $('#sp1').on('click', function() {
    $("#t1").show();
  });
  $('#close').on('click', function() {
    $("#t1").hide();
  });
}); 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>

<div class="col-md-12 col-12 table-responsive">
  <div class="form-group">
    <div class="col-md-12" style="padding: 10px !important;" align="center">
      <div class="form-group">Main heading</div>
    </div>
<table class="table table-hover">
      <thead class="lbbg3">
        <tr>
          <td style="width: 800px;">Sub heading 1</td>
          <td>Sub heading 2</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th style="background: #eef7fc; text-align: left;" colspan="2">
            <button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close"><i class="fa fa-minus"></i></button> Child Heading
          </th>
        </tr>
        <tr>
          <td colspan="2">
            <div class="table1shw">
              <table class="table1 table-hover" id="t1">
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 1
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <a href="#doc">
                        <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
                        <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 2
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
                      <label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Привет, в настоящее время я использую две кнопки Плюс и минус, просто мне нужно отображать одновременно одну кнопку. при нажатии кнопки плюс отобразится скрытая таблица, должна появиться кнопка минус, а кнопка плюс — скрыть. то же самое и для кнопки минус. больше мы можем сказать кнопка переключения. также требуется, чтобы мы могли отображать одновременно только одну скрытую таблицу.

Весь код и таблица в настоящее время работают нормально, я использовал этот метод для аккордеона, но не использовался для таблицы.

Ответ №1:

также вы можете написать это немного короче

 $(document).ready(function() {
  $("#t1, #close").hide();
  $('#sp1, #close').on('click', function() {
    $('#t1, .table-plus-btn, .table-minus-btn').toggle();
  });
});

Ответ №2:

Вы можете скрывать / показывать кнопки на основе щелчка. Я добавил функцию ToggleButtons(show), где show равно, хотите ли вы показать или скрыть строку.

 function toggleButtons(show) {
      if (show) {
        $("#sp1").hide();
        $("#close").show();
      } else {
        $("#sp1").show();
        $("#close").hide();
      }
  }
 
 $(document).ready(function() {
  $("#t1").hide(); // hide table by default
  $('#sp1').on('click', function() {
    toggleButtons(true)
    $("#t1").show();
  });
  $('#close').on('click', function() {
    toggleButtons(false)
    $("#t1").hide();
  });
  
  
  function toggleButtons(show) {
      if (show) {
        $("#sp1").hide();
        $("#close").show();
      } else {
        $("#sp1").show();
        $("#close").hide();
      }
  }
}); 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>

<div class="col-md-12 col-12 table-responsive">
  <div class="form-group">
    <div class="col-md-12" style="padding: 10px !important;" align="center">
      <div class="form-group">Main heading</div>
    </div>
<table class="table table-hover">
      <thead class="lbbg3">
        <tr>
          <td style="width: 800px;">Sub heading 1</td>
          <td>Sub heading 2</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th style="background: #eef7fc; text-align: left;" colspan="2">
            <button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button>
            <button class="table-minus-btn" id="close" style="display: none"><i class="fa fa-minus"></i></button> 
            Child Heading
          </th>
        </tr>
        <tr>
          <td colspan="2">
            <div class="table1shw">
              <table class="table1 table-hover" id="t1">
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 1
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <a href="#doc">
                        <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
                        <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 2
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
                      <label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Ответ №3:

Если я не ошибаюсь, это то, что вы хотите сделать: во-первых, отобразить кнопку «плюс» и скрыть таблицу Во-вторых, при нажатии кнопки «плюс» отобразить таблицу, скрыть кнопку «плюс» и показать кнопку «минус» В-третьих, при нажатии кнопки «минус» скрыть кнопку «минус», показатькнопка плюс и скрыть таблицу.

Кажется, что ваш код не работает, ПОТОМУ что вы не скрываете / не отображаете кнопки в нужное время. Я также предполагаю, что одновременно должна отображаться только одна кнопка?

 $(document).ready(function() {
        $("#t1").hide(); // hide table by default
        $("#close").hide(); //hide the minus button as well if you only want one button to display at a time

  $('#sp1').on('click', function() { //when plus button is clicked
    $("#t1").show(); 
    $("#sp1").hide(); //you need to hide the plus button now
    $("#close").show(); //and then display the minus button
  });
  $('#close').on('click', function() { 
    $("#t1").hide(); //hide table
    $("#close").hide(); //hide minus btn
    $("#sp1").show(); //show plus button
  });
});

Комментарии:

1. предположим, если использовать это для двух строк и обеих строк, которые я не хочу открывать, в это время откроется только одна строка, а вторая отключится. как это я могу сделать.

2. ваш код работает нормально спасибо за вашу помощь

3. Вы должны сделать то же самое, показать одну таблицу, а затем, когда нажата кнопка плюс, показать другую. Когда нажата кнопка минус, скройте вторую таблицу.

4. здесь используется как этот скрипт, но первая таблица все еще открыта до тех пор, пока я не нажму минус. мне нужно, чтобы приведенная выше таблица исчезла, как только будет нажата вторая кнопка плюс

5. Итак, вы хотите, чтобы обе таблицы были скрыты, и одна таблица должна отображаться при нажатии на знак плюс, а другая должна отображаться при повторном нажатии на знак плюс?