使用表单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));
                    }
                }
            }
        }
    }

它显示了更改，但当我使用表单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();
    });

动态添加的类将丢失。

source code of print page

Answer 1

你可以看到下面的代码，我可以在其中获得带有更新的类的表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">

​