PHP怎样实现单击“添加”按钮增加一行表单项,并将所有内容插入到数据库中

在百度上看到这个提问,想着解答一下,效果如下图:

html+jquery:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(':button[name=add]').click(function(){
        insertTr();
    })
    $('button[name=del]').click(function(){
        $(this).parents('tr').remove();
    })
    $(':button[name=delall]').click(function(){
        $('.itme').remove();
    })
})
var gradeI=1;
function insertTr(){
    var html='';
    html+='<tr class="itme"><td><input type="text" name="data[time][]"></td>';
    html+='<td><input type="radio" name="data[grade]['+gradeI+']" value="1">好<input type="radio" name="data[grade]['+gradeI+']" value="2">很好</td>';
    html+='<td><select name="data[type][]"><option value="优秀生">优秀生</option><option value="三好生">三好生</option></select></td>';
    html+='<td><button name="del">删除</button></td></tr>';
    $('#tab').append(html);
    $('button[name=del]').click(function(){
        $(this).parents('tr').remove();
    })
    gradeI++;
}
</script>
</head>
<body>

<form action="exe.php" method="post" name="f1">
    <table width="500px" id="tab">
        <tr><th>日期</th><th>级别</th><th>种类</th><th>操作</th></tr>
        <tr class="itme">
            <td><input type="text" name="data[time][]"></td>
            <td><input type="radio" name="data[grade][0]" value="1">好<input type="radio" name="data[grade][0]" value="2">很好</td>
            <td><select name="data[type][]"><option value="优秀生">优秀生</option><option value="三好生">三好生</option></select></td>
            <td><button name="del">删除</button></td>
        </tr>
    </table>
    <div><input type="submit" name="sub" value="保存" /><input type="button" name="delall" value="全部删除"><input type="button" name="add" value="增加"></div>
</form>

</body>
</html>

exe.php

<?php

$arr_time=$_POST['data']['time'];
$arr_grade=$_POST['data']['grade'];
$arr_type=$_POST['data']['type'];

for($i=0;$i<count($arr_time);$i++){
    $insert[$i]['time']=$arr_time[$i];
    $insert[$i]['grade']=$arr_grade[$i];
    $insert[$i]['type']=$arr_type[$i];
}

echo "<pre>";
print_r($insert);
echo "</pre>";
/*每个数据是一条数据
Array
(
    [0] => Array
        (
            [time] => 2014年11月7日 15:50:18
            [grade] => 1
            [type] => 三好生
        )

    [1] => Array
        (
            [time] => 2014年11月7日 15:50:24
            [grade] => 2
            [type] => 优秀生
        )

    [2] => Array
        (
            [time] => 2014年11月7日 15:50:27
            [grade] => 1
            [type] => 三好生
        )

)
*/
?>

看到结果应该知道怎么做了吧。

时间: 2024-08-25 05:26:13

PHP怎样实现单击“添加”按钮增加一行表单项,并将所有内容插入到数据库中的相关文章

PHP实现单击“添加”按钮增加一行表单项,并将所有内容插入到数据库中

PHP实现单击“添加”按钮增加一行表单项,并将所有内容插入到数据库中 效果图: html+jquery: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script language="javascript" type="text/javascript" src=&qu

点击按钮带编号增加一行js

<table class="tblborder" cellspacing="1" cellpadding="5" width="100%" align="center" bgcolor="#42344a" border="0">      <tr><td><strong id="add_process"&g

Repeater中添加按钮,点击按钮获取某一行的数据

1.添加编辑按钮和删除按钮 <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <table width="100%" border="1" cellpadding="0" cellspacing="0&q

点击按钮添加或者删除一行实例代码

点击按钮添加或者删除一行实例代码:网站在填写表达的时候又很多的选择空间,甚至可以自行添加需要添加的内容,例如可以点击按钮添加一个表达项,如果不需要的话可以点击一个按钮删除,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

task 3:编写函数实现单击change按钮,为div元素添加红色双线的边框。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>编写函数实现单击change按钮,为div元素添加红色双线的边框.</title>    <style type="text/css">        div{            font-family: "Helvetica Neue&quo

angular2动态增加一行组件和删除组件示例改进版(增加了添加数据、清空数据、打印数据功能)

初始效果 点击添加行  点击添加数据  点击打印数据  点击清空数据 TS 部分代码讲解 /** * 获取数组对象 */ get arrayList() { return this.fg.get('arrayList') as FormArray; } 获取的 HTML页面的控件arrayList 对象 /** * 添加数据 */ addData(){ this.arrayList.controls.forEach((item,index)=>{ //此处的this.arrayList出自 ge

ImageButton单击切换按钮图片

有时单击ImageButton图片按钮时需要获取变换图片的效果,在这里介绍两种方法仅供参考 正常显示 点击切换 方法一:通过给按钮配置XML文件来实现图片按钮的背景切换效果 在layout或者是drawable文件下添加一个imagebtn_select.xml文件 <?xml version="1.0" encoding="utf-8"?>    <selector xmlns:android="http://schemas.andro

Android SimpleAdapter 中添加按钮响应事件,getView的重写

Andriod 里面的ListView是一个显示列表数据的控件,常用适配器SimpleAdapter进行绑定,绑定代码如下: ListView lstView = (ListView) this.findViewById(R.id.listView1); SimpleAdapter adapter=new SimpleAdapter(context, data, resource, from, to); lstView.setAdapter(adapter); ListView 列表中的元素的单

SM30维护视图添加按钮

遇到某需求,要求维护sm30的视图时,能加上排序按钮. [转自http://blog.csdn.net/tsj19881202/article/details/7517232] 1. se11       点击修改,进入对应的表,然后点击“表格维护生成器” 2.进入后,点击 环境-修改-用户界面 3 点控制信息,创建控制信息. 4. 此时对应的程序应当为你的表名.5. se80 去打开程序,发现跟正常程序一样有“gui状态”,和“gui标题” 6.点开gui状态会发现有很多状态,这时候应该用哪一