javascript - 如何使用其样式在javascript中复制行

Question

我想复制最后一行及其所有内容，包括 span 和 input 以及 CSS 类，在同一个表格的最后一行下面。我该怎么做？

$("#addRow").click(function() {
      var tableditTableName = '#AddCatTbl';
      var newID = parseInt($(tableditTableName + " tr:last").attr("id")) + 1;
      var x = $(tableditTableName + " tr:last").attr("style");
      var clone = $("table tr:last").clone();
      $(".tabledit-data span", clone).text("");
      $(".tabledit-data input", clone).val("");
      clone.appendTo("table");
      $(tableditTableName + " tr:last").attr("id", newID);
      $(tableditTableName + " tr:last").attr("style", x);
      $(tableditTableName + " tr:last td .tabledit-span.tabledit-identifier").text('newID');
      $(tableditTableName + " tr:last td .tabledit-input.tabledit-identifier").val('newID');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="AddCatTbl" class="table table-bordered table-striped">
      <tr id="22">
        <td><span class="tabledit-span tabledit-identifier">22</span><input class="tabledit-input tabledit-identifier" type="hidden" name="id" value="22" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span">Coconuts</span><input class="tabledit-input form-control input-sm" type="text" name="Category Name" value="Coconuts" style="display: none;" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span">Copra</span><input class="tabledit-input form-control input-sm" type="text" name="Category Type" value="Copra" style="display: none;" disabled=""></td>
        <td style="white-space: nowrap; width: 1%;">
          <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
            <div class="btn-group btn-group-sm" style="float: none;"><button type="button" class="tabledit-edit-button btn btn-sm btn-warning" style="float: none;"><span class="glyphicon glyphicon-pencil"></span></button><button type="button" class="tabledit-delete-button btn btn-sm btn-danger" style="float: none;"><span class="glyphicon glyphicon-trash"></span></button></div>
            <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="display: none; float: none;">Save</button>
            <button type="button" class="tabledit-confirm-button btn btn-sm btn-default" style="display: none; float: none;">Confirm</button>
            <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
          </div>
        </td>
      </tr>
     <button id="addRow">Add Row</button>
    </table>

Answer 1

将您想要的样式声明为 CSS 类并将其分配给您想要的克隆元素，例如让 styleClass:

.styleClass{
color:red
}

所以不是这个:

$(tableditTableName + " tr:last").attr("style", x);

使用这个addClass() jQuery 函数:

$(tableditTableName + " tr:last").addClass("styleClass");

这是一个演示:

 $("#addRow").click(function() {
      var tableditTableName = '#AddCatTbl';
      var newID = parseInt($(tableditTableName + " tr:last").attr("id")) + 1;
      var x = $(tableditTableName + " tr:last").attr("style");
      var clone = $("table tr:last").clone();
      $(".tabledit-data span", clone).text("");
      $(".tabledit-data input", clone).val("");
      clone.appendTo("table");
      $(tableditTableName + " tr:last").attr("id", newID);
      $(tableditTableName + " tr:last").addClass("styleClass");
      $(tableditTableName + " tr:last td .tabledit-span.tabledit-identifier").text(newID);
      $(tableditTableName + " tr:last td .tabledit-input.tabledit-identifier").val(newID);
    });

.styleClass{
color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="AddCatTbl" class="table table-bordered table-striped">
      <tr id="22">
        <td><span class="tabledit-span tabledit-identifier">22</span><input class="tabledit-input tabledit-identifier" type="hidden" name="id" value="22" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span">Coconuts</span><input class="tabledit-input form-control input-sm" type="text" name="Category Name" value="Coconuts" style="display: none;" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span">Copra</span><input class="tabledit-input form-control input-sm" type="text" name="Category Type" value="Copra" style="display: none;" disabled=""></td>
        <td style="white-space: nowrap; width: 1%;">
          <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
            <div class="btn-group btn-group-sm" style="float: none;"><button type="button" class="tabledit-edit-button btn btn-sm btn-warning" style="float: none;"><span class="glyphicon glyphicon-pencil"></span></button><button type="button" class="tabledit-delete-button btn btn-sm btn-danger" style="float: none;"><span class="glyphicon glyphicon-trash"></span></button></div>
            <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="display: none; float: none;">Save</button>
            <button type="button" class="tabledit-confirm-button btn btn-sm btn-default" style="display: none; float: none;">Confirm</button>
            <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
          </div>
        </td>
      </tr>
     
    </table>
    <button id="addRow">Add Row</button>