从表格上传表格数据，按行分组

Question

我正在尝试使用类似以下的结构（当然，这是一个“简单的例子”，实际的表是由PHP生成的，并且由多个文件，输入以及更多的<td> ）：

<table>
    <!-- loop($iterator=0; $iterator < num_of_rows; $iterator++) -->
    <tr id='"row-'.$iterator.'"'>
        <form action="uploadHandler.php" method="post" enctype="multipart/form-data" id='"form-'.$iterator.'"' class="form-uploader">
            <td><input type="file" class="main-img" name="main-img"/></td>
            <td><input type="text" name="main-img-title" /></td>
            <td><input type="submit" /></td>
        </form>
    </tr>
    <!-- end loop -->
</table>

但是，我读到<tr>除<td>之外的任何内容以及<table>除<tr> ， <caption> ， <thead> / <tbody> / <tfoot>均无效HTML。 此外，我们在上述结构中添加了数据表（ https://datatables.net/ ），并且由于数据表删除/重建了表元素，因此除表元素之外的所有内容都被清除掉了。

解决方案？

1. 一种想法是移动<form>元素以避免这种复杂性。 我在这里没有成功，因为出于功能原因，表单必须封装多个<td> ，但是不能封装多个<tr> 。 我不能包装<tr> ，因为它是无效的HTML，就像<tr> 内的表单一样 。 <form>不能在<td>因为它必须包含多个<td> ，并且<td>关闭时， <form>将随后关闭。

2. 使用JS：我考虑过要在页面上使用一种静态隐藏形式。 在数据表中提交表单后，请干预表单的标准提交，并使用适当的<input>元素填充隐藏的表单，然后使用AJAX（和FormData对象）提交该隐藏的表单。 这个想法看起来像这样：

    $(document).ready(function() { $(".form-uploader").submit(function(e) { e.preventDefault(); var identifier = $(this).attr("id"); //idVal represents the $iterator (in table above) //idVal is used to retrieve the appropriate row/inputs from the table of rows above var idVal = identifier.substring(identifier.lastIndexOf("-")+1, identifier.length); var mainImage = $("#row-"+idVal+" .main-img"); if(mainImage) { alert("mainImage found: " + JSON.stringify(mainImage)); //move inputs from Data Table row to static-hidden form //use FormData obj to post the static-hidden form } else { alert("id: "+idVal+" No main image found"); } //return true when testing is complete return false; } } 

   现在，它以某种方式找到了适当数量的输入（如我对多个输入进行的测试），但Javascript对象mainImage看起来像mainImage found: {"0":{},"length":1,...} ！ 当我期望索引为0的<input>对象时，我得到{} ...空！

3. 最后，我希望有一些jQuery Guru可以为我指出正确的方向，以指导他们如何正确地检索和移动所需的<input type="file">或者可以帮助解决我的解决方案结构中潜在问题的人。与HTML表/数据表兼容！

这里和许多其他问题都是类似的问题，但是答案建议使用CSS来样式化表格。 这些不是首选，因为<table>是数据表所必需的，并且具有所需的样式（重新设计轮子没有意义）。 我还看到了输入的表单属性，但这在IE中不起作用。 这里建议用表格将整个表封装起来，但是对于如何区分行没有任何帮助。

感谢您对我的第一个堆栈问题的任何帮助，也感谢您的宝贵时间和考虑！

Answer 1

这可以解释为什么我不能简单地获取<input type="file">并将其移动到JS中的另一种形式。 基本上，Javascript作为客户端的限制阻止了大多数文件数据的访问。 安全第一的孩子！

最终，我相信对“表中的输入行”的合理解决方案始于封装整个表的形式。 从那里，您必须相应地区分数据。 这可能取决于您的服务器端语言，因为我的是PHP，所以我使用了以下方法：

1. 使用具有相同名称属性但其中具有唯一值属性的提交按钮。 在PHP中，使用类似echo $_POST['submit-button']东西echo $_POST['submit-button']将仅返回按下的提交按钮的值，即使还有其他同名按钮也是如此。

2. 这样，我就可以为每个<tr>中的每个<input>利用唯一的标识符，从而可以按行对所有输入进行分组。

3. 最后，我将这个唯一标识符附加到表单中所有输入以及处理帖子时的名称属性中。

一个简短的例子：

uploadHandler.php

<?php
    if(isset($_POST['upload-button'])) {
        $identifier = $_POST['upload-button'];//this is the unique identifier for this row (see table below)
        //(All inputs would be contained in the all-encapsulating form, we only want ones from the row!)
        //Use $identifier to distinguish between <input>'s!
        $main_img = $_FILES['main-img'.$identifier];
        $main_img_title = $_POST['main-img-title'.$identifier];
    }
?>

formPage.php

<form method="post" action="uploadHandler.php" enctype="multipart/form-data">
    <table>
    <!-- loop($iterator=0; $iterator < num_of_rows; $iterator++) -->
        <tr id='"row-'.$iterator.'"'>
            <td><input type="file" class="main-img" name="main-img'.$iterator.'" /></td>
            <td><input type="text" name="main-img-title'.$iterator.'" /></td>
            <td><input type="submit" name="upload-button" value="'.$iterator.'" /></td>
        </tr>
    <!-- end loop -->
    </table>
</form>