克隆完整表并作为表单值提交

Clone full table and submit as form value

本文关键字：表单 提交      更新时间：2023-09-26

如何使用javascript正确复制/克隆html表并将其提交到php，在那里它将被转换为PDF和XLS文档？

到目前为止，我有一个类似于这样的html：

<table class="planning-table">
    <thead>
        <tr>
            <td>blah blah</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>
<form id="exportPDFform" method="post">
    <a href="#exportPDF" id="exportPDF">Eksport</a>
    <input id="table_data" type="hidden" name="table" value="" />
</form>

和jquery:

$("#exportPDF").on("click", function (){
    var value = $('.planning-table').clone();
    $("#table_data").val( escape( value ) );
    $("#exportPDFform").submit();
    return false;
});

现在，克隆是可行的，但当放在输入字段中时，它会给我：

[object-Object]

如何正确执行此操作？

PS：当选择不同的过滤器时，表单会被频繁地更改/创建，因此使用最终产品然后在PHP端重新创建它会容易得多

假设escape()接受一个字符串，而您提供的是一个jQuery对象。当您尝试将对象强制转换为字符串时，javascript将为您提供"[object Object]"。相反，您需要检索表的HTML值，如下所示：

var value = $('.planning-table').clone().wrap('<div />').parent().html();

我认为您不想使用Clone（）函数，相反，我认为您想获得元素的HTML内容，但要对表上方的元素使用.HTML（）函数。

<div id="table-container">
<table class="planning-table">
    <thead>
        <tr>
            <td>blah blah</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>
</div>
<form id="exportPDFform" method="post">
    <a href="#exportPDF" id="exportPDF">Eksport</a>
    <input id="table_data" type="hidden" name="table" value="" />
</form>

和

$("#exportPDF").on("click", function (){
    var value = $('#table-container').html();
    $("#table_data").val( escape( value ) );
    $("#exportPDFform").submit();
    return false;
});
相关文章：