【发布时间】:2021-01-13 05:02:42
【问题描述】:
我有一个表,其中包含每个用户的项目,每个表都有新项目的输入字段。
通过单击“添加”按钮,新输入的项目被发送到数据库并显示在表格中。 这适用于一张桌子,但不适用于多张桌子。
我曾尝试将 ids 更改为 jquery 函数中的类,但随后项目被添加到所有表中,而不仅仅是所需的表中。
这是我的代码:
index.php
<body>
<div class="container">
<?php
$usertables = array();
$usertables[] = 'user1';
$usertables[] = 'user2';
$usertables[] = 'user3';
$usertables[] = 'user4';
foreach ($usertables as $value){
$query = "SELECT * FROM $value ORDER BY id ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<h3><?php echo $value; ?></h3>
<form method="post" id="add_details">
<input type="hidden" name="value" value="<?= htmlspecialchars($value); ?>" />
<div class="form-group">
<label>Item name</label>
<input type="text" name="item_name" class="form-control" required />
</div>
<div class="form-group">
<label>Height</label>
<input type="text" name="item_height" class="form-control" required />
</div>
<div class="form-group">
<label>Width</label>
<input type="text" name="item_width" class="form-control" required />
</div>
<div class="form-group">
<label>Color</label>
<input type="text" name="item_color" class="form-control" required />
</div>
<div class="form-group">
<input type="submit" name="add" id="add" class="btnn btn-success" value="Add" />
</div>
</form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Height</th>
<th>Width</th>
<th>Color</th>
</tr>
</thead>
<tbody id="table_data">
<?php
foreach($result as $row) {
echo '<tr>
<td>'.$row["item_name"].'</td>
<td>'.$row["item_height"].'</td>
<td>'.$row["item_width"].'</td>
<td>'.$row["item_color"].'</td>
</tr>';
}
?>
</tbody>
</table>
<?php
} // end of foreach
?>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#add_details').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"insert.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#add').attr('disabled', 'disabled');
},
success:function(data){
$('#add').attr('disabled', false);
if(data.item_name) {
var html = '<tr>';
html += '<td>'+data.item_name+'</td>';
html += '<td>'+data.item_height+'</td>';
html += '<td>'+data.item_width+'</td>';
html += '<td>'+data.item_color+'</td></tr>';
$('#table_data').append(html);
$('#add_details')[0].reset();
}
}
})
});
});
</script>
插入.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=usertables", "root", "");
//$tablename = $_GET['tablename'];
$value = $_POST["value"];
//echo $value;
$data = array(
':item_name' => $_POST["item_name"],
':item_height' => $_POST["item_height"],
':item_width' => $_POST["item_width"],
':item_color' => $_POST["item_color"],
);
$query = "INSERT INTO $value
(item_name, item_height, item_width, item_color)
VALUES (:item_name, :item_height, :item_width, :item_color)";
$statement = $connect->prepare($query);
if($statement->execute($data)) {
$output = array(
'item_name' => $_POST['item_name'],
'item_height' => $_POST['item_height'],
'item_width' => $_POST['item_width'],
'item_color' => $_POST['item_color'],
);
echo json_encode($output);
}
?>
由于我对 jquery 比较陌生,我想问一下是否有任何简单的方法可以在相应的表中运行 jquery-Add-function,只是?
感谢您的帮助!
【问题讨论】:
-
每个用户都有自己的表格和表格?请详细说明
-
是的,没错,每个用户都有一个表格和表格。
-
每个用户都有自己的桌子......疯狂,疯狂我告诉你。当你获得 100 万用户时会发生什么?您可能需要执行一百万次查询才能获取一个用户的详细信息
-
你的
$data和$output数组肯定是完全一样的,所以为什么要麻烦$output只是重复使用$data -
简单的方法:因为您已经在表单中隐藏了带有表名的输入..即:
$value。如何将id="<?= htmlspecialchars($value); ?>"提供给您的 tbody 标签并在 jquery 代码中获取您的值即:var value = $('input[name=value]').val(),然后在你的 ajax 成功中使用它,即:$('#'+value).append(html);
标签: php jquery ajax database foreach