Добавить строку в таблицу

447

15 января 2018, 07:32

как добавить еще 1 строку в таблицу по нажатию кнопки

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

Answer 1

Добавьте обработчик onClick к вашей кнопке.

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

Answer 2

так? только перегружается страница и ничего нет

$(".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>')
})

Answer 3

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>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Контактная форма на Foundation

Помогите сверстать с помощью фреймворка Foundation эту контактную формуПроблема в том что не могу разобраться как работать с отступами со вложенными...

286

CSS

Поддержка лигатурных иконок браузерами

Наткнулся на интересную штуку - шрифт, в котором вместо иконки ты пишешь слово, а оно показывается как иконкаНе знаю, как сделано именно тут,...

237

CSS

Треугольник с частью изображения

Как лучше всего реализовать такой треугольник с частью изображения

287

CSS

css анимация pacman без `svg`

Как реализовать такую анимацию на cssЖелательно без svg

306