Basculer masquer / afficher & lt; tr & gt; en utilisant jQuery

J'ai ce code pour afficher <tr> dans ma table, mais à chaque clic, il masque la zone de texte qui doit être affiché lorsque le bouton est cliqué.

Ci-dessous est mon jQuery le code pour afficher la zone de texte:

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

Et c'est mon code dans <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>

source d'informationauteur bebebe

  1. 7

    Vous avez des invalides de balisage. Vous avez besoin d'envelopper tr dans le tableau.quelque chose comme ceci:

    <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>

    Et js serait:

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

    Travail De Démonstration

  2. 3

    Il va vous aider à

    $(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>

    Démo

  3. 2

    espère que c'est vous aider.

    vous pouvez voir mon Exemple

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

    Vous avez besoin de cacher votre élément par défaut pour faire show() méthode fonctionne:

    .td1 {
    display: none;
}

    Violon Démo

    ou vous pouvez utiliser bascule() ici:

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

    Violon Démo

  5. 0

    Bouton ajouter comme suit:

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

    et 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>