使用克隆复制 table 行

Question

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

<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>

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

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

$(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 问题是这样的。如果您开始在第一个 table 中添加几行，则一切正常。在此之后，在第二个 table 中添加几行。这似乎工作正常。但是，现在开始删除第二个 table 中的行。出于某种原因，它似乎也删除了第一个 table.

中的行

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

谢谢

Answer 1

你正在删除这个：

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

这个id在第一个table也有，你要选择一个更指定的选择器

喜欢：

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

或更好：（以上来自 K. Bastian 的评论）

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

我在这里编辑了你的示例：

https://jsfiddle.net/cLssk6bv/

这里我也删除了重复的代码，只是不同的插入方式还存在：

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

使用克隆复制 table 行

Duplicating table rows with clone

javascript

jquery

jquery-clone