1

Есть html разметка

<table width="100%">
            <tr>
                <td>Ширина</td>
                <td>Высота</td>
                <td>Артикуль</td>
                <td>Кол-во полотен</td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="width[0]" class="add_product_input" style="width:200px;"/>
                </td>
                <td>
                    <input type="text" name="height[0]" class="add_product_input" style="width:200px;"/>
                </td>
                <td>
                    <input type="text" name="articul[0]" class="add_product_input" style="width:200px;"/>
                </td>
                <td>
                    <input type="text" name="count[0]" class="add_product_input" style="width:200px;"/>
                </td>
            </tr>
        </table>
        <span class="add_attr">Добавить</span>

Как сделать так что бы при нажатии на "Добавить добавлялось "

<tr>
                <td>
                    <input type="text" name="width[0]" class="add_product_input" style="width:200px;"/>
                </td>
                <td>
                    <input type="text" name="height[0]" class="add_product_input" style="width:200px;"/>
                </td>
                <td>
                    <input type="text" name="articul[0]" class="add_product_input" style="width:200px;"/>
                </td>
                <td>
                    <input type="text" name="count[0]" class="add_product_input" style="width:200px;"/>
                </td>
            </tr>

Реализовать нужно средствами jquery

1 ответ 1

3

$('.add_attr').click(function() {
  var rowCount = $('tr').length - 1;
  var row = $('tr').last().clone();
  row.find('input').each(function() {
    var name = $(this).attr('name');
    $(this).attr('name', name.replace(/\[\d+\]/, '[' + rowCount + ']'))
  });
  $('table').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%">
  <tr>
    <td>Ширина</td>
    <td>Высота</td>
    <td>Артикуль</td>
    <td>Кол-во полотен</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="width[0]" class="add_product_input" style="width:200px;" />
    </td>
    <td>
      <input type="text" name="height[0]" class="add_product_input" style="width:200px;" />
    </td>
    <td>
      <input type="text" name="articul[0]" class="add_product_input" style="width:200px;" />
    </td>
    <td>
      <input type="text" name="count[0]" class="add_product_input" style="width:200px;" />
    </td>
  </tr>
</table>
<span class="add_attr">Добавить</span>

2
  • Класс, а как сделать так что бы счетчик увеличивался. width[0], width[1], width[2] итд
    – duddeniska
    27 июл 2016 в 9:54
  • Отредактировал ответ. 27 июл 2016 в 9:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.