how to add 1 more row to the table by pressing a button

<div class="data-list"> <table> <thead> <tr> <th>Разновидность</th> <th>TXB</th> <th>40СМ</th> <th>50СМ</th> <th>60СМ</th> <th>70СМ</th> <th>80СМ</th> <th>90СМ</th> <th>ПУЧОК</th> <th>СТЕБЕЛЬ</th> </tr> </thead> <tbody> <tr class="data-row"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb"></td> <td><span></span> <input type="text" name="40cm"></td> <td><span></span> <input type="text" name="50cm"></td> <td><span></span> <input type="text" name="60cm"></td> <td><span></span> <input type="text" name="70cm"></td> <td><span></span> <input type="text" name="80cm"></td> <td><span></span> <input type="text" name="90cm"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> </tbody> </table> <button class="btn-add">+</button> </div>

    3 answers 3

    Add an onClick handler to your button.

     $(".btn-add").click(function() { $(this.parentElement).find("table tbody").append("<tr><td>...</td></tr>") }) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="data-list"> <table> <thead> <tr> <th>Разновидность</th> <th>TXB</th> <th>40СМ</th> <th>50СМ</th> <th>60СМ</th> <th>70СМ</th> <th>80СМ</th> <th>90СМ</th> <th>ПУЧОК</th> <th>СТЕБЕЛЬ</th> </tr> </thead> <tbody> <tr class="data-row"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb"></td> <td><span></span> <input type="text" name="40cm"></td> <td><span></span> <input type="text" name="50cm"></td> <td><span></span> <input type="text" name="60cm"></td> <td><span></span> <input type="text" name="70cm"></td> <td><span></span> <input type="text" name="80cm"></td> <td><span></span> <input type="text" name="90cm"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> </tbody> </table> <button class="btn-add">+</button> </div>

      So? only the page is overloaded and there is nothing

       $(".btn-add").click(function() { $(this.parentElement).find("table tbody").append('<tr class="data-row"> <td><span></span> <input type="text" name="razn[]"></td> <td><span></span> <input type="text" name="txb[]" value="25"></td> <td><span></span> <input type="text" name="40cm[]"></td> <td><span></span> <input type="text" name="50cm[]"></td> <td><span></span> <input type="text" name="60cm[]"></td> <td><span></span> <input type="text" name="70cm[]"></td> <td><span></span> <input type="text" name="80cm[]"></td> <td><span></span> <input type="text" name="90cm[]"></td> <td><span></span> <input type="text" name="bounch[]"></td> <td><span></span> <input type="text" name="stems[]"></td> </tr>') }) 

         var tBody = document.getElementsByTagName('tbody')[0]; var dataRow = document.getElementsByClassName('data-row')[0]; var btnAdd = document.getElementsByClassName('btn-add')[0]; btnAdd.addEventListener('click', () => { var line = dataRow.cloneNode(true); tBody.appendChild(line) }) 
         <div class="data-list"> <table> <thead> <tr> <th>Разновидность</th> <th>TXB</th> <th>40СМ</th> <th>50СМ</th> <th>60СМ</th> <th>70СМ</th> <th>80СМ</th> <th>90СМ</th> <th>ПУЧОК</th> <th>СТЕБЕЛЬ</th> </tr> </thead> <tbody> <tr class="data-row"> <td><span></span> <input type="text" name="razn"></td> <td><span></span> <input type="text" name="txb"></td> <td><span></span> <input type="text" name="40cm"></td> <td><span></span> <input type="text" name="50cm"></td> <td><span></span> <input type="text" name="60cm"></td> <td><span></span> <input type="text" name="70cm"></td> <td><span></span> <input type="text" name="80cm"></td> <td><span></span> <input type="text" name="90cm"></td> <td><span></span> <input type="text" name="bounch"></td> <td><span></span> <input type="text" name="stems"></td> </tr> </tbody> </table> <button class="btn-add">+</button> </div>