当使用form-post方法发送表时，向表中动态添加的类将丢失

Question

我有一个类似的表格

<table id="tab" class="table table-bordered table-striped table-sm text-right">
<thead class="table-header bg-light">
<tr>
<td colspan="7"></td>
...
</tr>
</thead>
</table>

我使用jQuery动态添加了一个类(即siz1或size5(。代码如下：

function change_size(inc_dec){
for(i=1;i<12;i++){
if($("#tab").hasClass("size"+i)){
if(inc_dec==="inc"){
if(i != 11){
$("#tab").removeClass("size"+i);
$("#tab").addClass("size"+(i+1));
break;
}
}else{
if(i != 1) {
$("#tab").removeClass("size" + i);
$("#tab").addClass("size" + (i - 1));
}
}
}
}
}

它显示了更改，但当我使用form-post方法将整个html发送到另一个页面时，使用以下代码将其发送到另个页面。我使用PHP和jQuery来发送。

$('.export-btn').on('click',function(e){
var html = $(this).closest('.page').find('.page-records').html();
var title = $(this).closest('.page').find('.record-title').html();
$('#exportformdata').val(html);
$('#exportformtitle').val(title);
$('#exportform').submit();
});

动态添加的类丢失。

打印页面的源代码

Answer 1

您可以看到下面的代码，在这里我可以获得带有更新classess的表html。您可以先点击original按钮获取原始表html的html，然后点击update按钮获取类名更新后的html。

所以这里需要从父元素而不是那个元素中获取html()。您可以使用一些div作为父元素来包装表。

$(function(){
$("#update").on("click", function(){
$('table').removeClass("green");
$('table').addClass("blue");
var updatedHTML = $("#tab").html();
alert(updatedHTML);
$("#updateValue").val(updatedHTML);
});
$("#original").on("click", function(){
var originalHTML = $("#tab").html();
alert(originalHTML);
$("#originalValue").val(originalHTML);
});
});

.green {
background-color: green;
}
.blue {
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab">
<table class="green">
<tr><td>Some Test here....</td></tr>
</table>
</div>
<br>
<input type="button" value="original" id="original">
<input id="originalValue">
<br><br>
<input type="button" value="update" id="update"><br>
<input id="updateValue">