从 foreach 循环的所有元素运行 jquery 函数
Posted
技术标签:
【中文标题】从 foreach 循环的所有元素运行 jquery 函数【英文标题】：Run jquery function from all elements of foreach loop 【发布时间】：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);
【参考方案1】：
您可以将$value 用作特定用户表的tbody 的ID，当用户单击提交按钮时，使用$(this).find("input[name=value]").val() 获取输入值，然后使用 $('#' + value).append(html); 将数据附加到特定用户表的tbody只有 .Also，您需要在 html 代码中进行的唯一更改就是将 id 添加到 tbody 即。 :<tbody id="<?= htmlspecialchars($value); ?>">.
演示代码：
$('form').on('submit', function(event)
event.preventDefault();
var $this = $(this)
var value = $(this).find("input[name=value]").val(); //get hidden input value
console.log(value)
/* $.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>';*/
var html = "<tr><td colspan='4'>append me</td></tr>";
$('#' + value).append(html); //append data
$this[0].reset();
/*
)*/
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="add_details">
<input type="hidden" name="value" value="something" />
<div class="form-group">
<label>Item name</label>
<input type="text" name="item_name" 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="something">
</tbody>
</table>
<form method="post" id="add_details">
<input type="hidden" name="value" value="something1" />
<div class="form-group">
<label>Item name</label>
<input type="text" name="item_name" 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="something1">
</tbody>
</table>【讨论】：
你能帮我解决这个 php 问题吗？请。它已经很久了。 ***.com/questions/64081641/…以上是关于从 foreach 循环的所有元素运行 jquery 函数的主要内容，如果未能解决你的问题，请参考以下文章
我在 PHP 中有 2 个日期，我怎样才能运行一个 foreach 循环来度过所有这些日子？
如何形象地解释 JavaScript 中 map，foreach，reduce 间的区别
声明数组变量/// 计算所有元素的总和/打印所有元素总和/输出/foreach循环/数组作为函数的参数/调用printArray方法打印