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