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. CSU1315：全场最水题之陈兴老师与比赛

    Description 大家都知道ACM比赛罚时很重要.比如说你做A题要10分钟,B题要15分钟,如果先做A题再做B题,那么在ranking上的时间就是10 + (10)+ 15 = 35.如果先做B ...

  2. LINUX 内核调试基础+编程基础

    http://blog.chinaunix.net/uid-20564848-id-73208.html 内核文档:[root@localhost Documentation]# pwd /usr/s ...

  3. linux下mysql配置文件my.cnf详解

    basedir = path 使用给定目录作为根目录(安装目录). character-sets-dir = path 给出存放着字符集的目录. datadir = path 从给定目录读取数据库文件 ...

  4. win 10 安装 mysql解压版 步骤

    参考资料:win 10 安装 mysql 5.7 网址:http://blog.sina.com.cn/s/blog_5f39af320102wbk0.html 本文参考上面的网址的教程,感谢作者分享 ...

  5. css 图片平铺

    背景图尺寸(数值表示方式): #background-size{ background-size:200px 100px; } 背景图尺寸(百分比表示方式): #background-size2{ b ...

  6. Ant配置

    首先去官网下载一个ant的文件 http://ant.apache.org/bindownload.cgi

  7. Android 开发笔记——通过 Intent 传递类对象

    Android中Intent传递类对象提供了两种方式一种是 通过实现Serializable接口传递对象,一种是通过实现Parcelable接口传递对象. 要求被传递的对象必须实现上述2种接口中的一种 ...

  8. Android清单文件AndroidMenifest.xml

    1.AndroidMenifes.xml清单文主要结构件结构 所谓主要结构就是每一个清单文件中都必不可少的结构主要是下面三层 第一层.menifest 第二层.application,use-sdk ...

  9. Deep Learning 学习随记（四）自学习和非监督特征学习

    接着看讲义,接下来这章应该是Self-Taught Learning and Unsupervised Feature Learning. 含义: 从字面上不难理解其意思.这里的self-taught ...

  10. 最简单的基于FFmpeg的移动端例子：IOS 推流器

    转至:http://blog.csdn.net/leixiaohua1020/article/details/47072519   ================================== ...