Динамически добавлять столбцы с флажками в HTML-таблицу в форме - PullRequest
Новая
       6

Динамически добавлять столбцы с флажками в HTML-таблицу в форме

0 голосов
/ 23 октября 2018

Я пытаюсь создать таблицу, в которую можно динамически добавлять строки / столбцы, но столкнулся с проблемой добавления столбцов.

См. Здесь JSFiddle

http://jsfiddle.net/6r75zgoa/

Сам стол начинается с очень простого.Она имеет кнопку «Добавить строку» внизу и кнопку «Добавить столбец» в первом столбце: 

<form name="myform" id="myform">
    <table id="tablegrid">
        <tr id="Row1">
            <td class="space">&nbsp;</td>
            <td>State 1<BR><button type="button" class="btnAddCol">Add Col</button>
    </br></td>
        </tr>
        <tr id="Row2">
            <td>
                <input type="text" placeholder="Name" name="Name" />
            </td>
            <td>
                <input type="checkbox" name="State1" />
            </td>
        </tr>
    </table>
    <button type="button" id="btnAdd">Add Row</button>
    </br>
    <input type="submit"></input>
</form>

Кнопка «Добавить столбец» в первом столбце добавляет столбцы.

В каждом новом столбце должна быть кнопка «Добавить Colu», чтобы добавить другие столбцы.Код добавляет кнопку «Добавить столбец», но новая кнопка не работает (работает только первая кнопка добавления столбца).

См. Javascript ниже: 

     $('#btnAdd').click(function () {
         var count = 1,
             first_row = $('#Row2');
         while (count-- > 0) first_row.clone().appendTo('#tablegrid');
     });


     var myform = $('#myform'),
         iter = 2;
     $('.btnAddCol').click(function () {
         myform.find('tr').each(function(){
           var trow = $(this);
             if(trow.index() === 0){
             trow.append('<td>State '+iter+'<BR><button type="button" class="btnAddCol">Add Col</button></td>');
             } else {
                 trow.append('<td><input type="checkbox" name="name'+iter+'"/></td>');
             }

         });
         iter += 1;
      });

Что я могу сделатьзаставить работать новые кнопки "Добавить столб"?

1 Ответ

0 голосов
/ 23 октября 2018

Измените это: 

$('.btnAddCol').click(function () {
    //code here
});

На: 

$(document).on('click', '.btnAddCol', function () {
    //code here
});

В вашем коде, когда пользователь нажимает кнопку, запускается только одно событие.Но в моем примере событие срабатывает каждый раз, когда пользователь нажимает на страницу.И второй параметр - это класс, который должен иметь элемент, по которому щелкнули.

...