Question

我想创建一个添加和删除行系统。但是，我不知道如何制作它。我看过一些类似的问题，但所有问题都使用https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284 &key=YOUR_API_KEY和<TR>，我想使用Bootstrap。

这是我的HTML：

<TD>

每次按#plus-btn我想添加相同的内容。我有2个.js文件。

当所选选项不为空时显示文本输入的那个：

<tr>
        <td class="pref-list-m">
        <button class="minus-btn"><i id="minus-icon" class="fa fa-minus" aria-hidden="true"></i></button>
        </td>

        <td class="pref-list-p">
        <button class="plus-btn"><i id="plus-icon" class="fa fa-plus" aria-hidden="true"></i></button>
        <td>

        <td class="pref-list-d">
        <select class="btn-sm custom pref-list" name="preferences">
            <option value="" hidden> Elige </option>
            <option value="deportes">Deportes</option>
            <option value="peliculas">Peliculas</option>
            <option value="carros">Carros</option>
            <option value="Libros">Libros</option>
            <option value="Colores">Colores</option>
        </select>
        </td>

        <td class="pref-text-d">
                <input type="text" class="hidden pref-text" placeholder=" item1,item2,item3">
        </td>

        </tr>

这是我用来添加表格的按钮。它添加了表，但是它在左边添加它，当它添加表时，上面的js文件不适用于新的select btn：

 $(document).ready(function() {
 $(".minus-btn").click( function(event) {
    event.preventDefault();
 });
     $(".plus-btn").click( function(event) {
    event.preventDefault();
 });
   $(".minus-btn").prop('disabled', true);
   $(".plus-btn").prop('disabled', true);

   $('.pref-list').change(function() {
     var selected = $(this).val();
     if (selected != '') {
       $('.pref-text').removeClass('hidden');
       $('.minus-btn').removeAttr('disabled', false);
       $(".plus-btn").removeAttr('disabled', false);

     } else {
       $(".minus-btn").removeAttr('disabled', true);
       $(".plus-btn").removeAttr('disabled', true);

     }

   })

 });

请帮我解决这个问题。谢谢。

＆lt; ----------------找到答案-------------------------- ----------＆GT;

   $(document).ready(function() {
   $(".plus-btn").click(function() {
     $("#extra-rows").append(
        '<tr>\
          <td class="pref-list-m">\
          <button class="minus-btn"><i id="minus-icon" class="fa fa-minus" aria-hidden="true"></i></button>\
          </td>\
          <td class="pref-list-p">\
          <button class="plus-btn"><i id="plus-icon" class="fa fa-plus" aria-hidden="true"></i></button>\
          <td>\
          <td class="pref-list-d">\
          <select class="btn-sm custom pref-list" name="preferences">\
            <option value="" hidden> Elige </option>\
            <option value="deportes">Deportes</option>\
            <option value="peliculas">Peliculas</option>\
            <option value="carros">Carros</option>\
            <option value="Libros">Libros</option>\
            <option value="Colores">Colores</option>\
          </select>\
          </td>\
          <td class="pref-text-d">\
                <input type="text" class="hidden pref-text" placeholder=" item1,item2,item3">\
          </td>\
          </tr>\
                ');
      });

  $("#delete_Row").click(function() {
    if ($(".test tr").length != 0) {
     $(".test tr:last-child").remove();
      } else {
       alert("Now table is empty");
      }
    })
    });

使用引导行添加和删除行系统

0 个答案: