Вопросы Теги

Невозможно скрыть элементы tr при нажатии кнопки с помощью jquery

Пространства просто заменяются на «% 20»:

http://www.example.com/my%20beautiful%20page

0
задан Muhammad Omer Aslam 18 January 2019 в 11:36
поделиться

2 ответа

вы хотите добавить ниже двух строк в обоих событиях нажатия кнопки. 

$("#tr1").toggle();
$("#tr2").toggle();

Ваш код jQuery здесь: 

jQuery(document).ready(function(){
    $("#tr1").hide();
    $("#tr2").hide();
  $("#btn1").click(function () {
    $(this).toggleClass("buttonActive");
    $("#tr1").show();
    $("#tr2").hide();
  });
  $("#btn2").click(function () {
    $(this).toggleClass("buttonActive");
    $("#tr1").hide();
    $("#tr2").show();
  });
});

Если вы хотите, чтобы все элементы tr были показаны / скрыты. Вы просто добавляете одну строку ниже 

$("tr").toggle();
0
ответ дан Kiran Patel 18 January 2019 в 11:36
поделиться

Вам нужно изменить css и jquery ниже, отметьте их 

$(document).ready(function(){
  $('#tr1').hide();
  $('#tr2').hide();
  $('#tr3').hide();
});

$("#btn1").click(function () {
         $(this).toggleClass("buttonActive");
         if($(this).hasClass("buttonActive")){
           $('#tr1').show();
         }
         else{
           $('#tr1').hide();
         }
    });
$("#btn2").click(function () {
         $(this).toggleClass("buttonActive");
         $('#tr2').show();
         if($(this).hasClass("buttonActive")){
           $('#tr2').show();
         }
         else{
           $('#tr2').hide();
         }
    });
$("#btn3").click(function () {
         $(this).toggleClass("buttonActive");
         $('#tr3').show();
         if($(this).hasClass("buttonActive")){
           $('#tr3').show();
         }
         else{
           $('#tr3').hide();
         }
    });    
.buttonInactive {
    background-color: #1E78AB;
    border: 1px solid #1E78AB;
    color: #fff;

}
.buttonInactive.buttonActive {
    background-color:#fff;
    border: 1px solid #1E78AB;
    color: #1E78AB;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="btn1" type="button" class="buttonInactive">Btn1</button>
<button id="btn2" type="button" class="buttonInactive">Btn2</button>
<button id="btn3" type="button" class="buttonInactive">Btn3</button>




<table>
  <tr id="tr1">
  <td>
  <input type="text" name="val1" id="val1" placeholder="val1"/></td>
  <td><input type="text" name="val2" id="val2" placeholder="val2"/></td>
  </tr>
  <tr id="tr2">
  <td>
  <input type="text" name="val3" id="val3" placeholder="val3"/></td>
  <td><input type="text" name="val4" id="val4" placeholder="val4"/></td>
  </tr>
  <tr id="tr3">
  <td>
  <input type="text" name="val5" id="val5" placeholder="val5"/></td>
  <td><input type="text" name="val6" id="val6" placeholder="val6"/></td>
  </tr>
</table>

0
ответ дан Hiren Vaghasiya 18 January 2019 в 11:36
поделиться