PHP-处理（提交）生成的行的HTML最佳实践

Question

我有通过Ajax生成的html表。 此表的最后一列包含按钮。 我的问题是提交这些行的最佳做法是什么（一次只能提交一行。我需要使用此方法来修改记录）。 是否值得用每行包装

<form> 
     <input type="hidden" value="hidden value"> 
     <input type="submit">
</form>

还是人们使用一些差异？ 我要问的原因是因为我担心很长的列表示例1k行或10k行（这意味着我在页面上会有1k或10k表单）。

Answer 1

您可以只使用超链接（如果需要，可以使用CSS设置其样式，使其看起来像一个按钮）。 例如：

<a href="edit.php?id=1">Edit</a>

您作为“ id”参数给出的值是该行中记录的主键。

然后在edit.php中使用$_GET["id"]查找id值，并从数据库中获取适当的记录。

Answer 2

正如Progrock所建议的那样，仅在“需要流内容的地方 ”（即，不能作为table或tr的直接子元素）使用form元素。

HTML 5引入了form属性作为解决方法：

<form id="row_1">
    <input type="hidden" name="id" value="pk1">
</form>
<form id="row_2">
    <input type="hidden" name="id" value="pk2">
</form>
<table>
    <tr>
        <td> <input type="text" name="attribute1" form="row_1"> </td>
        <td> <input type="submit" form="row_1"> </td>
    </tr>
    <!-- and so on for each row -->
</table>

引起我注意的是，在这种情况下，没有提交任何直接的用户输入，而只是生成了内容。

好了，那么解决方案就更简单了：

<table>
    <tr> <td>
        <form id="row_1">
            <input type="hidden" name="id" value="pk1">
            <input type="hidden" name="attribute1" value="whatever">
            <input type="submit">
        </form>
    </td> </tr>
    <!-- and so on for each row -->
</table>

Answer 3

我以为我会没有表格元素，只能使用可编辑的表格单元格。 在每一行中，您提供一个按钮。 当您单击它时，将由单元格值组成一个ajax帖子。

您可能会遇到一个非js后退的情况，其中将保存按钮替换为一个编辑按钮，该按钮会将您带到具有单个表单的另一个页面。

原谅我的JS。

我在那里有会话存储，只是为了检查概念。

<?php
session_start();
var_dump($_SESSION);

$data = array(
    23 => ['triangle', 'green', '2'],
    47 => ['square', 'red', '3'],
    17 => ['pentagon', 'pink', '4']
);

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Save state here
    $_SESSION['submission'] = $_POST;
}
?>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(function() {
                $('button').click(function() {
                    // Get all table cells in the buttons row
                    var $cells = $(this).closest('tr').find('td[contenteditable="true"]');
                    var jsonData = {};
                    $.each($cells, function() {
                        jsonData[get_table_cell_column_class($(this))] = $(this).text().trim();
                    });
                    jsonData['id'] = $(this).attr('id');
                    $.post('',jsonData, function() {
                        alert('Saved.');
                    });
                });

                function get_table_cell_column_class($td)
                {
                    var $th = $td.closest('table').find('th').eq($td.index());

                    return $th.attr('class');
                }
            });
        </script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th class="shape">Shape</th>
                    <th class="colour">Colour</th>
                    <th class="width">Width</th>
                    <th>Ops</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($data as $key => $row) { ?>
                    <tr>
                        <?php foreach($row as $field) { ?>
                            <td contenteditable=true>
                                <?php echo $field ?>
                            </td>
                        <?php } ?>
                        <td>
                            <button id="<?php echo $key ?>">Save</button>
                        </td>
                    </tr>
                <?php } ?>
            </tbody>
        </table>
    </body>
</html>

Answer 4

您可以使用以下内容

<table id="YourTableId">
    ...
   <tr data-id="yourrowId">
        <td class="col1"> value1</td>
        <td class="col2"> value2</td>
        <td class="col3"> value3</td>
        <td class="actions">
             <a href="#"> Submit</a>
        </td>
   </tr>
   ....
</table>

您的JavaScript代码会像

$(document).ready(function (){
     $('#YourTableId a').off('click').on('click',function(e){
          e.preventDefault();
          var tr = $(this).closest('tr')
          var data={ // here you can add as much as you want from variables
            'id' : tr.data('id), // if you want to send id value
            'col1': tr.find('.col1').text(),
            'col2': tr.find('.col2').text(),
            'col3': tr.find('.col3').text(),
          };

          $.ajax({
              method: 'post',
              url: 'your url goes here',
              data: data,
              success: function(result){
                  // handle the result here
              }
          });
     });
});

希望这个能对您有所帮助

PHP-处理（提交）生成的行的HTML最佳实践

问题描述

4 个解决方案

解决方案1
1 2016-09-20 10:45:20

解决方案2
1 2016-09-20 11:18:23

解决方案3
1 2016-09-20 13:22:00

解决方案4
0 已采纳 2016-09-20 10:47:39

PHP-处理（提交）生成的行的HTML最佳实践

问题描述

4 个解决方案

解决方案1 1 2016-09-20 10:45:20

解决方案2 1 2016-09-20 11:18:23

解决方案3 1 2016-09-20 13:22:00

解决方案4 0 已采纳 2016-09-20 10:47:39

解决方案1
1 2016-09-20 10:45:20

解决方案2
1 2016-09-20 11:18:23

解决方案3
1 2016-09-20 13:22:00

解决方案4
0 已采纳 2016-09-20 10:47:39