使用克隆复制表行

Question

我遇到了一个我正在努力解决的问题。我有两张桌子

<div class="form-group">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12 noPadding">
                <table class="table table-bordered table-hover additionalMargin alignment" id="table1">
                    <thead>
                    <tr>
                        <th>Campaign Type</th>
                        <th>Deployment Date</th>
                        <th>Additional Information</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class='template'>
                        <td>
                            <select class="selectType" name='typeInput[0][campType]' id="campInput">
                                <option value=""></option>
                                <option value="Main">Main</option>
                                <option value="Other">Standalone</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" name='typeInput[0][deliveryDate]' id="dateInput" placeholder='Deployment Date' class="form-control dateControl"/>
                        </td>
                        <td>
                            <textarea name='typeInput[0][addInfo]' id="additionalInput"  placeholder='Additional Information' class="form-control noresize"></textarea>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <a id='add' class="pull-right btn btn-default">Add Row</a>
                <a id='delete' class="pull-right btn btn-default">Delete Row</a>
            </div>
        </div>
    </div>
</div>


<div class="form-group">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-12 noPadding">
        <table class="table table-bordered table-hover additionalMargin alignment" id="table4">
          <thead>
            <tr>
              <th>Additional Information</th>
              <th>Deployment Date</th>
            </tr>
          </thead>
          <tbody>
            <tr class='template4'>
              <td>
                <textarea name='amendsInput[0][addInfo]' id="additionalInput"  placeholder='Additional Information' class="form-control noresize"></textarea>
              </td>
              <td>
                <input type="text" name='amendsInput[0][deliveryDate]' id="dateInput" placeholder='Deployment Date' class="form-control dateControl"/>
              </td>
            </tr>
          </tbody>
        </table>
        <a id='add4' class="pull-right btn btn-default">Add Row</a>
        <a id='delete4' class="pull-right btn btn-default">Delete Row</a>
      </div>
    </div>
  </div>
</div>

一个表有3个输入，另一个表有2.当在任一个表上按下添加按钮时，我正在克隆表行，其中包括克隆一个日期选择器。

事情进展顺利，但现在我遇到了问题。第二个表我用4结束所有内容，例如table4，template4，add4和delete4。然后我从preious表中复制了Javascript，但是为所有内容添加了4个（我复制了它，因为这个表有不同的输入）。这导致了以下代码。

$(function() {
    initJQueryPlugins();

    $('#add').on('click', function() { 
        $last_row = $('#table1 > tbody  > tr').last();
        if(!hasValues($last_row)){
            alert('You need to insert at least one value in last row before adding');
        } else {
            add_row($('#table1'));   
        }
    });

    $('#delete').on('click', function() { delete_row($('#table1')); });


    $('#add4').on('click', function() { 
        $last_row = $('#table4 > tbody  > tr').last();
        if(!hasValues4($last_row)){
            alert('You need to insert at least one value in last row before adding');
        } else {
            add_row4($('#table4'));   
        }
    });

    $('#delete4').on('click', function() { delete_row4($('#table4')); });
});


function add_row($table) {
    var tr_id = $table.find('tr').length - 1;
    var $template = $table.find('tr.template');

    var $tr = $template.clone().removeClass('template').prop('id', tr_id);

    $tr.find(':input').each(function() {
        if($(this).hasClass('hasDatepicker')) {
            $(this).removeClass('hasDatepicker').removeData('datepicker');
        }

        var input_id = $(this).prop('id');
        input_id = input_id + tr_id;
        $(this).prop('id', input_id);

        var new_name = $(this).prop('name');
        new_name = new_name.replace('[0]', '['+ tr_id +']');
        $(this).prop('name', new_name);

        $(this).prop('value', '');
    });
    $table.find('tbody').append($tr);

    $(".dateControl", $tr).datepicker({
        dateFormat: "dd-mm-yy"
    });

    $(".selectType", $tr).select2({
        tags: true
    });
}

function hasValues($row){
    $optVal = $row.find('td option:selected').text();
    $inputVal = $row.find('td input').val();
    $textVal = $row.find('td textarea').val();
    if($optVal != "" || $inputVal != "" || $textVal != ""){
            return true;
    } else {
            return false;
    }
}

function delete_row($table) {
    var curRowIdx = $table.find('tr').length - 1;
    if (curRowIdx > 2) {
        $("#" + (curRowIdx - 1)).remove();
        curRowIdx--;
    }
}

function add_row4($table4) {
    var tr_id = $table4.find('tr').length - 1;
    var $template = $table4.find('tr.template4');

    var $tr = $template.clone().removeClass('template4').prop('id', tr_id);

    $tr.find(':input').each(function() {
        if($(this).hasClass('hasDatepicker')) {
            $(this).removeClass('hasDatepicker').removeData('datepicker');
        }

        var input_id = $(this).prop('id');
        input_id = input_id + tr_id;
        $(this).prop('id', input_id);

        var new_name = $(this).prop('name');
        new_name = new_name.replace('[0]', '['+ tr_id +']');
        $(this).prop('name', new_name);

        $(this).prop('value', '');
    });
    $table4.find('tbody').append($tr);

    $(".dateControl", $tr).datepicker({
        dateFormat: "dd-mm-yy"
    });
}

function hasValues4($row4){
    $inputVal = $row4.find('td input').val();
    $textVal = $row4.find('td textarea').val();
    if($inputVal != "" || $textVal != ""){
            return true;
    } else {
            return false;
    }
}

function delete_row4($table4) {
    var curRowIdx = $table4.find('tr').length - 1;
    if (curRowIdx > 2) {
        $("#" + (curRowIdx - 1)).remove();
        curRowIdx--;
    }
}

function initJQueryPlugins() {
    add_row($('#table1'));
    add_row4($('#table4'));
}

我已经设置了FIDDLE 问题是这个。如果你开始在第一个表中添加几行，这一切都可以正常工作。在此之后，在第二个表中添加几行。这似乎工作正常。但是，现在开始删除第二个表中的行。出于某种原因，它似乎也删除了第一个表中的行。

所以我的主要问题是为什么会发生这种情况？另外，有没有办法在不重复代码的情况下做到这一点？第二个表不使用select2。

由于

Answer 1

您要删除此内容：

 $("#" + (curRowIdx - 1)).remove();

此ID也可在第一个表中使用，您必须选择更明确的选择器

像：

$table4.find("#" + (curRowIdx - 1)).remove();

或更好:(来自K. Bastian的评论）

$table4.find('tr').last().remove()

我在这里编辑了你的样本：

https://jsfiddle.net/cLssk6bv/

这里我还删除了dublicated代码，只有不同的insert方法仍然存在：

https://jsfiddle.net/cLssk6bv/1/