javascript - 使用克隆复制表行

Question

我有一个问题正在努力解决。我有两张 table

<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 结束所有内容，例如表4、模板4、添加4和删除4。然后我从上一个表中复制了 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/

这里我也删除了重复的代码，只是不同的插入方法仍然存在:

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