在 PHP 中动态添加数据到 HTML 表

Question

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

Answer 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 文档 - 他们会给您很好的示例来扩展您的知识。

Answer 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。

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

Answer 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>

并在 head 或 body 中添加此 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('');

不要使用回车，只需横向输入代码即可。

希望这可以帮助你。

Answer 4

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

所以我希望你能帮助我，因为我刚刚开始接触 javascript 和 jquery。

Answer 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);
            } 
          });
      });
  });

Answer 6

这篇文章对我很有帮助，谢谢