将数据动态添加到PHP中的HTML表格中
我想从示例图像中单击添加按钮时,将数据从输入字段动态添加到HTML表格中。我怎么做到这一点。?我可以用PHP做到吗??因为我 初学者,我不能找到这里将数据动态添加到PHP中的HTML表格中
精确匹配的结果,但我发现了一个相关的线程,Creating a dynamic table using php based on users input data。但我觉得这个过程是由2页(共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文档 - 他们会给你很好的例子来扩展你的知识。
如果你可以使用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。
这只在前端侧。如果您有其他进程将新加入的数据保存到数据库中,则必须在将数据显示在表中之前先处理它。
首先,让我们做这样的:
成表,就像这样:
<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('');
不要使用回车,只需横向输入代码。
希望这可以帮助你。
您即时reply..i泰牛仔尝试过的代码,但我无法得到+已经堂妹的我用JavaScript和jQuery等知识的结果,是非常poor.now我的代码是这样的
所以我希望你会帮助我只是步入javascript和jquery。
$(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);
}
});
});
});