PHP-处理（提交）生成的行的HTML最佳实践
[英]PHP - HTML best practices to handle (submit) generated rows
问题描述
I have html table generated via ajax. 
我有通过Ajax生成的html表。 And last column on this table contains button. 此表的最后一列包含按钮。 My question is what is the best practice to submit these rows (only one at time. I need use this method to amend records). 我的问题是提交这些行的最佳做法是什么（一次只能提交一行。我需要使用此方法来修改记录）。 Is it worth to wrap each row with 是否值得用每行包装
<form>
<input type="hidden" value="hidden value">
<input type="submit">
</form>
Or people using something difference? 还是人们使用一些差异？ Reason why i'm asking for is because i'm worry about very long list example 1k rows or 10k rows (that means i will have 1k or 10k forms on a page). 我要问的原因是因为我担心很长的列表示例1k行或10k行（这意味着我在页面上会有1k或10k表单）。
4 个解决方案
解决方案1
1 2016-09-20 10:45:20
You can just use a hyperlink (which you can style to look like a button using CSS if you want). 您可以只使用超链接（如果需要，可以使用CSS设置其样式，使其看起来像一个按钮）。 eg: 例如：
<a href="edit.php?id=1">Edit</a>
where the value you give as the "id" parameter is the primary key of the record in that row. 您作为“ id”参数给出的值是该行中记录的主键。
Then in edit.php look for the id value using $_GET["id"] and fetch the appropriate record from the DB. 然后在edit.php中使用$_GET["id"]查找id值，并从数据库中获取适当的记录。
解决方案2
1 2016-09-20 11:18:23
As Progrock advises , a form element may only be used " where flow content is expected " (ie not as a direct child of table or tr ). 正如Progrock所建议的那样 ，仅在“需要流内容的地方 ”（即，不能作为table或tr的直接子元素）使用form元素。
HTML 5 introduces a form attribute as a workaround: 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>
It has been brought to my attention that in this case, there is no direct user input being submitted, but only generated contents. 引起我注意的是，在这种情况下，没有提交任何直接的用户输入，而只是生成了内容。
Well, then the solution is even simpler: 好了，那么解决方案就更简单了：
<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>
解决方案3
1 2016-09-20 13:22:00
I thought I'd have a go without form elements, working with editable table cells. 我以为我会没有表格元素，只能使用可编辑的表格单元格。 Within each row you provide a button. 在每一行中，您提供一个按钮。 And when you click it, an ajax post is made of the cell values. 当您单击它时，将由单元格值组成一个ajax帖子。
You could have a non js fall back where the save button is replaced for an edit button that takes you to another page with a single form. 您可能会遇到一个非js后退的情况，其中将保存按钮替换为一个编辑按钮，该按钮会将您带到具有单个表单的另一个页面。
Forgive my JS. 原谅我的JS。
I have the session storage in there just to check the concept. 我在那里有会话存储，只是为了检查概念。
<?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>
解决方案4
0 已采纳 2016-09-20 10:47:39
You can use the following 您可以使用以下内容
<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>
your javascript code will be like 您的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
}
});
});
});
Hope this will help you 希望这个能对您有所帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.