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] => 三好生

        ) 

)

*/

?>

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

  1. Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库

    利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值  并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...

  2. 两种方法将oracle数据库中的一张表的数据导入到另外一个oracle数据库中

    oracle数据库实现一张表的数据导入到另外一个数据库的表中的方法有很多,在这介绍两个. 第一种,把oracle查询的数据导出为sql文件,执行sql文件里的insert语句,如下: 第一步,导出sq ...

  3. 将excle表中得数据生成insert语句插入到数据库中

    第一步:输入公式 第二步:拽住右下角得+往下拖拽

  4. 通过store为toolbar添加按钮

    目的是实现导航条toolbar可以动态加载按钮. ExtJS的版本是4.0. 实现方案有两个.方案一:添加render事件监听,在监听事件处理函数中使用Ext.Ajax获取按钮信息,实现动态添加按钮. ...

  5. SQL查询数据库中所有指定类型的字段名称和所在的表名

    --查询数据库中所有指定类型的字段名称和所在的表名 --eg: 下面查的是当前数据库中 所有字段类型为 nvarchar(max) 的字段名和表名 SELECT cols.object_id , co ...

  6. 用dwr封装表单项提交表单

    首先,配置dwr环境,网上很多资料都说得很详细,这里就不写了. dwr封装form表单项,需要用到dwr定义的一个js方法:DWRUtil.getValues(yourform),这个方法可以返回一个 ...

  7. 添加按钮 table增加一行 删减按钮 table去掉一行

    需求描述:做的一个AA新增功能,同时可以为这个即将新增的AA添加内容,而且AA的内容默认展示一行列表,点击添加按钮后出现下一行列表 解决思路:页面首先展示一个表头和列表的一行,作为默认展示的一行列表, ...

  8. 点击添加按钮,使用ajax动态添加一行和移除一行,并且序号重新排序和数据不重复操作判断

    <div class="control-group " style="top: -20px;position: relative;"> <la ...

  9. 如何往IE工具条添加按钮（转载)

    如何往IE工具条添加按钮 问题提出:金山词霸.网络蚂蚁等软件安装后会向IE的工具条添加自己的按钮.按下按钮后还会作出相应的动作,这种功能是如何实现的呢?读完本文,您也可以将自己应用程序的按钮添加到IE ...

随机推荐

  1. 第三篇：python基础之编码问题

    python基础之编码问题   python基础之编码问题 本节内容 字符串编码问题由来 字符串编码解决方案 1.字符串编码问题由来 由于字符串编码是从ascii--->unicode---&g ...

  2. SQL常用的语句和函数

    order by 的数值型灵活使用 select * from table_a where order by decode(函数,'asc',1,'desc',-1)*jsny; 控制试图的访问时间: ...

  3. Android 5.0以上手机出现找不到so文件

    问题描述 最近做项目出了一个bug项目中用到so文件,在5.0以上的手机上会报一个初始化异常错误,并提示找不到so文件.lib里目录结构类似如下  在Android5以下都没有问题,在5.0以上会报错 ...

  4. linux，安装软件报错cannot create regular file '/usr/local/man/man1': No such file or directory

    make install时报错,如下 install: cannot create regular file '/usr/local/man/man1': No such file or direct ...

  5. Tomcat-java.lang.IllegalArgumentException: Document base F:apps does not exist or is not a readable

    启动Tomcat的时候,报错:java.lang.IllegalArgumentException: Document base F:apps does not exist or is not a r ...

  6. anjularjs slider控件替代方案

    做项目需要一个slider控件,找了很久没有找到合适的指令集,无意间看到可以直接用range替代,不过样式有点丑. <label> <input type="range&q ...

  7. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  8. Error Creating Deployment 有关Tomcat配置问题

    配置Tomcat的时候出现提示框The selected server is enabled,but is not configured properly.Deployment to it will ...

  9. java_设计模式_工厂模式_Factory Pattern（2016-08-04）

    工厂模式主要是为创建对象提供了接口.工厂模式按照<Java与模式>中的提法分为三类: (1)简单工厂(Simple Factory)模式,又称静态工厂方法模式(Static Factory ...

  10. HDOJ 2037简单的贪心算法

    代码: #include<iostream> using namespace std; int main() { int n,s,t1[100],t2[100],i,t,j; while( ...