在 PHP 中动态地将数据添加到 HTML 表中答案

【问题标题】：Adding data dynamically to HTML Table in PHP在 PHP 中动态地将数据添加到 HTML 表中
【发布时间】：2018-06-28 22:44:14
【问题描述】：

我想在单击“添加”按钮时将输入字段中的数据动态添加到 HTML 表中，如示例图像所示。我怎样才能做到这一点？我可以用 PHP 做吗？因为我是初学者我在这里找不到完全匹配的结果，但我找到了一个相关的线程，Creating a dynamic table using php based on users input data，但我认为这个过程是由 2 页完成的（1 页用于输入，另一页用于显示输入数据在表中）根据代码...任何帮助将不胜感激。

【问题讨论】：

标签： javascript php jquery html-table

【解决方案1】：

假设您使用的是 jquery（给定您的标签），类似以下的内容将起作用：

$("button").click(function() {
  var newRow = "<tr>";

  $("form input").each(function() {
    newRow += "<td>"+$(this).val()+"</td>";
  });

  newRow += "</tr>";

  $("table").append(newRow);
});

有更好的方法可以做到这一点，但如果您刚刚开始学习，这可能是一个非常简单的起点。您应该在这里感兴趣的函数是：.click、.each、.val 和 .append。我建议您查看 jquery 文档 - 他们会为您提供很好的示例来扩展您的知识。

【讨论】：

【解决方案2】：

如果你可以使用 jQuery，你可以这样做。这不是完整的代码，只是为了让您了解如何开始使用它。

  jQuery('#add').click(function(){
    var memberName = jQuery('#memberName').val();
    var address = jQuery('#address').val();
    var designation = jQuery('#designation').val();    

   // Do some saving process first, using ajax and sending it to a php page on the server 
   // then make that php return something to validate if it's succesfully added or something 
   // before you show it on table. You can use ajax like
    jQuery.ajax({
           type: 'POST',
           url: 'you php file url.php',
           data: { name: memeberName, addr: address, desig: designation },
           dataType: 'json', // any return type you like
           succes: function(response){  // if php return a success state
                    jQuery('#tableID tbody').append('<tr><td>' + memberName + '</td><td>' + address  + '</td><td>' + designation + '</td></tr>');
           },
           error: function(response){  // if error in the middle of the call
                alert('Cant Add');
           }
    });
});

请务必将 id 更改为 html 元素中的 id。

这只是在前端。如果您有其他流程，例如将新添加的内容保存到数据库中，那么您必须先对其进行处理，然后再将其显示在表格上。

【讨论】：

【解决方案3】：

首先，让我们这样做：

进入表格，像这样：

<table id='mytable'>
<tr>
<tr>
<td>Member Name</td><td><input type="text" name="member[]"></td>
</tr>
<tr>
<td>Address</td><td><textarea></td>
</tr>
<tr>
<td>Designation</td><td>
  <select>
  <option value="asd">Asd</option>
  <option value="sda">Sda</option>
</select></td>
</tr>
</tr>
</table>

<div>
<input name='buttonadd' type='button' id='add_table' value='Add'>
</div>

并在头部或正文中添加此 javascript：

$("#add_table").click(function(){
 $('#mytable tr').last().after('<tr><td>Member Name</td><td><input type="text" name="member[]"></td></tr><tr><td>Address</td><td><textarea></td></tr><tr><td>Designation</td><td><select><option value="asd">Asd</option><option value="sda">Sda</option></select></td></tr>');
 });

在after(''); 内不要使用回车，只需横向输入代码即可。

希望对你有帮助。

【讨论】：

【解决方案4】：

Ty jean 为您的即时回复..我尝试了该代码，但我无法获得 +ve 结果，因为我对 javascript、jquery 等的了解非常差。现在我的代码是这样的

所以我希望你会帮助我，因为我刚刚进入 javascript 和 jquery。

【讨论】：

【解决方案5】：

$(document).ready(function()
  {
    $("#ser_itm").change(function()
      {
        var id=$(this).val();
        var dataString = 'id='+ id;
        alert(dataString);
        $.ajax
          ({
            type: "POST",
            url: "bar_pull.php",
            data: dataString,
            cache: false,
            success: function(data)
            {
              $("#tbl").html(data);
            } 
          });
      });
  });

【讨论】：