将数据动态添加到PHP中的HTML表格中

我想从示例图像中单击添加按钮时，将数据从输入字段动态添加到HTML表格中。我怎么做到这一点。？我可以用PHP做到吗？？因为我初学者，我不能找到这里将数据动态添加到PHP中的HTML表格中

精确匹配的结果，但我发现了一个相关的线程，Creating a dynamic table using php based on users input data。但我觉得这个过程是由2页（共1页用于输入，另一个用于显示输入数据的完成在表中）按照代码...任何帮助将不胜感激。

来源

2014-09-24 Akhil P M Paruthikudiyil

假设你正在使用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文档 - 他们会给你很好的例子来扩展你的知识。

来源

2014-09-24 03:17:46 Jean

如果你可以使用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。

这只在前端侧。如果您有其他进程将新加入的数据保存到数据库中，则必须在将数据显示在表中之前先处理它。

来源

2014-09-24 03:13:23 andrex

首先，让我们做这样的：

enter image description here

成表，就像这样：

<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('');不要使用回车，只需横向输入代码。

希望这可以帮助你。

来源

2014-09-24 03:34:24 Shitprogrammers

您即时reply..i泰牛仔尝试过的代码，但我无法得到+已经堂妹的我用JavaScript和jQuery等知识的结果，是非常poor.now我的代码是这样的

所以我希望你会帮助我只是步入javascript和jquery。

来源

2014-09-24 17:43:50

$(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); 
 
      } 
 
      }); 
 
     }); 
 
    });

来源

2015-10-02 15:19:43 simhaa

将数据动态添加到PHP中的HTML表格中

回答

相关问题