【问题标题】:Run jquery function from all elements of foreach loop从 foreach 循环的所有元素运行 jquery 函数
【发布时间】: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="&lt;?= htmlspecialchars($value); ?&gt;" 提供给您的 tbody 标签并在 jquery 代码中获取您的值即:var value = $('input[name=value]').val(),然后在你的 ajax 成功中使用它,即:$('#'+value).append(html);

标签: php jquery ajax database foreach


【解决方案1】:

您可以将$value 用作特定用户表的tbody 的ID,当用户单击提交按钮时,使用$(this).find("input[name=value]").val() 获取输入值,然后使用 $('#' + value).append(html); 将数据附加到特定用户表的tbody只有 .Also,您需要在 html 代码中进行的唯一更改就是将 id 添加到 tbody 即。 :&lt;tbody id="&lt;?= htmlspecialchars($value); ?&gt;"&gt;.

演示代码

$('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>

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2019-01-17
  • 1970-01-01
  • 2012-01-20
  • 2018-04-09
  • 2022-11-01
  • 1970-01-01
  • 2021-11-02
  • 1970-01-01
相关资源
最近更新 更多