Toggle hide/show <tr> с помощью jQuery

У меня есть этот код для отображения <tr> в моей таблице, но при каждом нажатии он скрывает текстовое поле, которое должно отображаться при нажатии кнопки.

Ниже представлен мой код jQuery, чтобы отобразить текстовое поле:

$(function() {
   $('#btnAdd').click(function() {
       $('.td1').show();
   });
});

И это мой код в <table>:

<button id="btnAdd" name="btnAdd" onclick="toggle();" class="span1">ADD</button>
<tr class="td1" id="td1" style="">  
     <td><input type="text" name="val1" id="val1"/></td>
     <td><input type="text" name="val2" id="val2"/></td>
</tr>

Ответ 1

У вас есть недопустимая разметка. Вам нужно обернуть tr в table.something, как это:

<button id="btnAdd" name="btnAdd" class="span1" >ADD</button>
<table class="td1" style="display: block;" >
<tr id="td1" >  
 <td><input type="text" name="val1" id="val1"/></td>
 <td><input type="text" name="val2" id="val2"/></td>
</tr>
</table>

И js будет:

$('#btnAdd').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.td1')
    elem.toggle('slow');
});

Рабочий демонстрационный пример

Ответ 2

Это поможет вам

$(function() {
    $('#btnAdd').click(function() {
        $('.td1').toggle();
    });
});

HTML

<button id="btnAdd" name="btnAdd" class="span1">ADD</button>
<table>
<tr class="td1" id="td1" style="">  
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
</table>

Демо

Ответ 3

Вам нужно скрыть свой элемент по умолчанию, чтобы сделать метод show():

.td1 {
    display: none;
}

Скриншот Демо

или вы можете использовать toggle() здесь:

$(function () {
    $('#btnAdd').click(function (e) {
        e.preventDefault();
        $('.td1').toggle();
    });
});

Скриншот Демо

Ответ 4

надеюсь, что это вам поможет.

вы можете увидеть мой Пример

  $('#btnAdd').click(function() {
         $('.td1').toggle('show');
  });

Ответ 5

Добавить кнопку, например So:

            <td>
                <button id="btnAdd" name="btnAdd">ADD</button>
            </td>

и JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btnAdd").click(function () {
            $('.td1').toggle();
        });
    });
</script>