Как отобразить показать / скрыть таблицу при нажатии кнопки «плюс-минус»

//JQuery Script one 
 $(document).ready(function(){
            $('.table1').on('click',function(){

                $('.table1shw').show();

            });
            
        });
        
        
//I try second method too but unable to display. 
document.getElementById('sp1').addEventListener("click", function() {
  showTable('t1');
});





function showTable(table) {
  var tables = ['t1'];
  for (var i = 0; i < 4; i++) {
    document.getElementById(tables[i]).style.display = "none";
  }
  document.getElementById(table).style.display = "block";

}

.table-hide{
    display: none;
}

<link href = "https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel = "stylesheet"/>
<link href = "https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel = "stylesheet"/>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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.2.1/jquery.min.js"></script>
<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></div> <button class = "table-minus-btn"><i class = "fa fa-minus"></i></button> Child Heading</th>

                                            </tr>
                                            <tr>
                                                <td colspan = "2">
                                                   <div class = "table1shw">  <table class = "table1 table-hover table-hide" 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>

Привет спасибо! я пытаюсь отобразить полную таблицу, как только я нажимаю кнопку «плюс», и та же таблица скрывается, когда я нажимаю кнопку «минус». Я бы сделал это двумя разными способами, но мне не повезло. поэтому я разочаровался в этом, как исправить, можете ли вы сказать мне, что я делаю неправильно и где. Пожалуйста помоги.

пожалуйста, приведите в порядок свой html-код.

— 14.12.2020 11:54

javascript html jquery css bootstrap-4

14.12.2020 10:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

565

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не вызываете .show() правильный элемент.

Я обновил ваш код -

$(document).ready(function() {
  $("#t1").hide(); // hide table by default
  $('#sp1').on('click', function() {
    $("#t1").show();
  });
  $('#close').on('click', function() {
    $("#t1").hide();
  });
});

<link href = "https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel = "stylesheet" />
<link href = "https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel = "stylesheet" />
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.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>

У меня изменения -

$("#t1").hide(); - Скрыть таблицу по умолчанию, используйте t1, который является идентификатором таблицы

Добавьте обработчик кликов на sp1, который является идентификатором кнопки плюс, и покажите таблицу внутри события -

$('#sp1').on('click', function() {
     $("#t1").show();
});

Наконец, добавьте обработчик нажатия на кнопку закрытия по ее идентификатору close

$('#close').on('click', function() {
     $("#t1").hide();
});

14.12.2020 13:50

Другие вопросы по теме

Как сделать так, чтобы секундомер автоматически запускался при загрузке страницы? без использования кнопки запуска

Как я могу сделать правый столбец фиксированной ширины, когда левый столбец имеет ширину в процентах?

Почему мои медиа-запросы не работают должным образом?

Проблема с эффектом перехода слайда кнопки CSS

Исчезновение предупреждающего сообщения Grails через 10 секунд

Как я могу получить соседа элемента html в javascript?

Изображения SVG не получают полную ширину области просмотра, т.е

Как инициализировать firebase в HTML и JavaScript

Как добавить шеврон в конце каждого элемента списка, выровненного справа

Почему мой цикл for не извлекает правильные данные из моего массива объектов?

Как отобразить показать / скрыть таблицу при нажатии кнопки «плюс-минус»

Ответы 1

Другие вопросы по теме

Похожие вопросы