我想复制最后一行及其所有内容,包括 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>
最佳答案
将您想要的样式声明为 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>
关于javascript - 如何使用其样式在javascript中复制行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46631329/