如何在php中使用表格发布表格？答案

【问题标题】：How to post table with a form in php?如何在php中使用表格发布表格？
【发布时间】：2017-07-18 18:56:40
【问题描述】：

我有一个表格，里面有一个表格（里面的值可以编辑），像这样：

<form action="file.php" id="myform" method="POST">
    <input name="inp">
    <div class="divclass">
        <table id="mytable" name="mytable">
        <tr><th>col1</th><th>col2</th></tr>
        <tr><td contenteditable='true'>val11</td>
        <td contenteditable='true'>val12</td></tr>
        <tr><td contenteditable='true'>val21</td>
        <td contenteditable='true'>val21</td></tr>
        </table>
    </div>
    <input type='submit' name='submit' value='Submit'>
</form>

<?php
    print_r ($_POST)
?>

那么，当我点击提交的时候，应该是整个表单都提交了吧？

但只有输入 - inp & submit 被提交到表单，当我在 php 中打印 post 参数数组时我知道。

谁能解释我如何在我的后参数数组 $_POST 中获取表数据？

另外，我如何在桌子上触发 onchange 事件？我试过这个，但它似乎没有用：

$("#mytable").change(function (event) {
    console.log("changed")
    console.log($("#keno_config_table").val())
})

【问题讨论】：

您需要使用<input> 字段，使它们contenteditable 不会传递它们的值。
你不能发布表格，你需要使用标签。

标签： php jquery html forms html-table

【解决方案1】：

那么，当我点击提交的时候，应该是整个表单都提交了吧？

没有。它不是表单控件。

但只是输入 - inp & submit 被提交到表单

输入是表单控件（就像选择、文本区域和按钮一样）。

谁能解释我如何在我的后参数数组 $_POST 中获取表数据？

使用 JavaScript，监听表单元素上的提交事件，并将表格的 HTML 复制到隐藏输入的 value 属性中。

或者：在表格单元格中使用输入元素，而不是使用 contentEditable。

【讨论】：

【解决方案2】：

当您提交表单时，只会提交 selector 元素中的值，而不是提交所有 html 元素。但是，如果您可以在 <td> 标签内添加输入标签，您将能够提交值。以下代码应该适合您。

<form action="file.php" id="myform" method="POST">
    <input name="inp">
    <div class="divclass">
        <table id="mytable" name="mytable">
        <tr><th>col1</th><th>col2</th></tr>
        <tr><td contenteditable='true'><input type="hidden" value="val11" name="value1"> val11</td>
        <td contenteditable='true'><input type="hidden" value="val12" name="value2"> val12</td></tr>
        <tr><td contenteditable='true'><input type="hidden" value="val21" name="value3"> val21</td>
        <td contenteditable='true'><input type="hidden" value="val21" name="value4"> val21</td></tr>
        </table>
    </div>
    <input type='submit' name='submit' value='Submit'>
</form>

jQuery

$("#mytable input[type='text']").change(function (event) {
    console.log("changed")
    console.log($(this).val())
});

PHP

<?php
if (!empty($_POST)){
    echo "Post data received";
    echo "Value 1 :".$_POST["value1"];
    echo "Value 2 :".$_POST["value2"];
    echo "Value 3 :".$_POST["value3"];
    echo "Value 4 :".$_POST["value4"];
}else{
    echo "Post data is empty. No value is passed from HTML to the server";
}
?>

【讨论】：

但是这样，我无法发布已编辑的新值。假设我在浏览器中打开后将 val11 更改为 asd11，我无法发布新值对吗？
将输入类型从“隐藏”更改为“文本”。您可以编辑并发送它。但是您会在<td> 标签中看到一个输入框。

【解决方案3】：

我建议你这样做

<form action="file.php" id="myform" method="POST">
    <input name="inp">
    <div class="divclass">
        <table id="mytable" name="mytable">
        <tr>
            <th>col1</th>
            <th>col2</th>
        </tr>
        <tr>
            <td><input name='col1[]' style='border:0;outline:0;display:inline-block' value='value'></td>
            <td><input name='col2[]' style='border:0;outline:0;display:inline-block' value='value'></td>
        </tr>
        <tr>
            <td><input name='col1[]' style='border:0;outline:0;display:inline-block' value='value'></td>
            <td><input name='col2[]' style='border:0;outline:0;display:inline-block' value='value'></td>
        </tr>
        </table>
    </div>
    <input type='submit' name='submit' value='Submit'>
</form>

（当然，为样式创建一个类，我只是想让它更简单）。输入看起来像无边框的 contenteditable 标记，您将能够获得所有 col1 和 col2 的数组，例如 $_POST['col1'] 和 $_POST['col2'] 此外，如果您不希望默认数据是，您可以将值更改为 placeholders已发送。

【讨论】：