Jquery+php 动态web表单增删改查

如这类效果：

例一：简单

<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>

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

        )

)

*/

?>

例二：完整

HTML部分:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script  src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.2.min.js"></script>

<script>

$(function() {

addchange();

$(".bnew").click(bnewclick);

});

//定义修改按钮工具

function addchange() {

$csave = "<input class='bsave display1' type='submit' value='保存' >"

$cbch = "<input class='bch' type='button' value='修改'>"

$cbde = "<input class='bde'type='button'  value='删除'>"

$(".tdc").html($csave + $cbch + $cbde);

$(".bch").click(bahclick);

$(".bsave").click(bsaveclick);

$(".bde").click(bdeclick);

}

//开启修改功能

function bahclick() {

//更改修改按钮

$(this).addClass("display1");

$(this).parent().children().eq(2).addClass("display1");

$(this).parent().children().eq(0).removeClass("display1");

//取原值

$thiss = $(this).parent().parent().children()

$cid = $thiss.eq(0).text();

$cname = $thiss.eq(1).text();

$csex = $thiss.eq(2).text();

if($csex == "男") {

$secn = "selected='selected'";

$secv = ""

} else {

$secn = "";

$secv = "selected='selected'"

}

$csrc = $thiss.eq(3).text();

//定义修改框体

$inputname = "<input type='text' name='name' value='" + $cname + "'>";

$inputsex = "<select><option value='男' " + $secn + ">男</option><option value='女'" + $secv + ">女</option></select>";

$inputscore = "<input type='text' name='name'value=" + $csrc + ">";

$thiss.eq(1).html($inputname);

$thiss.eq(2).html($inputsex);

$thiss.eq(3).html($inputscore);

};

//修改保存功能

function bsaveclick() {

//AJAX取值

$thiss = $(this).parent().parent().children()

$id = $thiss.eq(0).text();

$name = $thiss.eq(1).children().val();

$sex = $thiss.eq(2).children().val();

$src = $thiss.eq(3).children().val();

//AJAX提交

$.post("new1.php", {

full : [$id, $name, $sex, $src, '1']

}, function(msg) {

});

//更改保存按钮

$(this).addClass("display1");

$(this).parent().children().eq(1).removeClass("display1");

$(this).parent().children().eq(2).removeClass("display1");

//AJAX回传验证

$.post("new1.php", {

full : [$id, $name, $sex, $src, '2']

}, function(msg) {

obj = $.parseJSON(msg);

//alert(obj[1]+obj[2]+obj[3]);

$thiss.eq(1).html(obj[1]);

$thiss.eq(2).html(obj[2]);

$thiss.eq(3).html(obj[3]);

});

};

//新增功能

function bnewclick() {

//AJAX取值

$thiss = $(this).parent().parent().children()

$id = $thiss.eq(0).children().val();

$name = $thiss.eq(1).children().val();

$sex = $thiss.eq(2).children().val();

$src = $thiss.eq(3).children().val();

//未填项目验证

if($id == '' || $name == '' || $src == '') {

alert("有项目未填写")

} else {

//AJAX提交

$.post("new1.php", {

full : [$id, $name, $sex, $src, '3']

}, function(msg) {

//验证ID重复

if(msg == 1) {

alert("ID号重复");

$thiss.eq(0).children().val("");

} else {

//AJAX回传验证

$.post("new1.php", {

full : [$id, $name, $sex, $src, '2']

}, function(msg) {

//增加新项目

obj = $.parseJSON(msg);

$a = "<tr class='trc'><td>" + obj[0] + "</td><td>" + obj[1] + "</td><td>" + obj[2] + "</td><td>" + obj[3] + "</td><td class='tdc'></td></tr>"

$thiss.parent().before($a);

addchange()

$thiss.eq(0).children().val("");

$thiss.eq(1).children().val("");

$thiss.eq(3).children().val("");

})

}

})

}

};

//删除功能

function bdeclick() {

$r = confirm("是否确认删除")

if($r == true) {

$thiss = $(this).parent().parent();

$id = $thiss.children().eq(0).text();

$.post("new1.php", {

full : [$id, '', '', '', '4']

}, function(msg) {

//alert($id);

$thiss.remove();

})

}

};

</script>

<style>

td {

width: 100px;

}

input, option, select {

width: 95px;

}

.bch, .bde {

width: 50px;

}

.bsave, .bnew {

width: 100px;

}

.add {

border: 1px red solid

}

.display1 {

display: none

}

</style>

</head>

<body>

<div id="test"></div>

<table border="1" id="tab">

<tr>

<td>学号</td>

<td>姓名</td>

<td>性别</td>

<td>分数</td>

</tr>

<!--数据库遍历-->

<?php

include 'new1.php';

$xd = new new1();

echo $xd->five();

?>

<tr>

<td>

<input type='text' name='id'>

</td>

<td>

<input type='text' name='name'>

</td>

<td>

<select>

<option value='男'>男</option>

<option value='女'>女</option>

</select></td>

<td>

<input type='text' name='src'>

</td>

<td>

<input type='button' value="新增" class="bnew">

</td>

</tr>

</table>

</body>

</html>

PHP部分：

<?php

$arr = $_POST ['full'];

$conn = mysql_connect ( "localhost", "root", "" );

mysql_select_db ( "test", $conn );

mysql_query ( "set names 'utf8'" );

switch ($arr [4]) {

case 1 : //更新

$sql = "update  sus set name=" . "'" . "$arr[1]" . "'" . ",sex=" . "'" . "$arr[2]" . "'" . ",src=$arr[3] where id=$arr[0]"; //sql语句

$result = mysql_query ( $sql );

break;

case 2 : //验证

$sql = "select * from  sus where id=$arr[0]";

$result = mysql_query ( $sql );

$row = mysql_fetch_array ( $result );

echo json_encode ( $row );

break;

case 3 : //新增

$sql = "select * from  sus where id=$arr[0]";

$result = mysql_query ( $sql );

$amount = mysql_num_rows ( $result );

if ($amount != 0) {

echo $amount;

} else {

$sql = "insert into  sus (id,name,sex,src)value (" . $arr [0] . ",'" . $arr [1] . "','" . $arr [2] . "'," . $arr [3] . ")"; //sql语句

$result = mysql_query ( $sql );

echo $sql;

}

;

break;

case 4 : //删除

$sql = "delete  from  sus where id=$arr[0]";

$result = mysql_query ( $sql );

break;

}

class new1 {//数据库遍历

public function five() {

$conn = mysql_connect ( "localhost", "root", "" );

mysql_select_db ( "test", $conn );

mysql_query ( "set names 'utf8'" );

$sql = "select * from sus order by id";

$result = mysql_query ( $sql );

while ( ! ! $row = mysql_fetch_array ( $result ) ) {

echo "<tr class='trc'><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td><td class='tdc'></td></tr>";

}

mysql_close ( $conn );

}

}

?>

Jquery+php 动态web表单增删改查的更多相关文章

bootstrap+Ajax+SSM(maven搭建)表单增删改查
前后端分离,前端利用ajax调用后端API接收json数据,进行表单的增删改查软件架构 IDE:IDEA 数据库:mysql jdk:1.8 tomcat:9 后端:springmvc,mybati ...
GZFramwork数据库层《四》单据主从表增删改查
同GZFramwork数据库层<三>普通主从表增删改查不同之处在于:实例修改为: 直接上效果: 本系列项目源码下载地址:https://github.com/GarsonZhang/G ...
GZFramwork数据库层《三》普通主从表增删改查
运行结果: 使用代码生成器(GZCodeGenerate)生成tb_Cusomer和tb_CusomerDetail的Model 生成器源代码下载地址: https://github.com/Gars ...
GZFramwork数据库层《二》单据表增删改查(自动生成单据号码)
运行效果: 使用代码生成器(GZCodeGenerate)生成tb_EmpLeave的Model 生成器源代码下载地址: https://github.com/GarsonZhang/GZCodeGe ...
GZFramwork数据库层《一》普通表增删改查
运行结果: 使用代码生成器(GZCodeGenerate)生成tb_MyUser的Model 生成器源代码下载地址: https://github.com/GarsonZhang/GZCode ...
Vc数据库编程基础MySql数据库的表增删改查数据
Vc数据库编程基础MySql数据库的表增删改查数据一丶表操作命令 1.查看表中所有数据 select * from 表名 2.为表中所有的字段添加数据 insert into 表名( 字段1,字段2 ...
JQuery EasyUI 动态改变表单项的验证守则
//JQuery EasyUI 动态改变表单项的验证规则 $(document).ready(function(){ $('#FILE_QUALITY').combobox({ onChange:fu ...
TESTUSERB 仅能对TESTUSERA 用户下的某些表增删改查、有些表仅能对某些列update，查询TESTUSERB 用户权限，获取批量赋予语句。
TESTUSERB 仅能对TESTUSERA 用户下的某些表增删改查.有些表仅能对某些列update,查询TESTUSERB 用户权限,获取批量赋予语句. select 'grant '|| PRIV ...
SSH框架下的多表增删改查
下载地址:SSH框架下的多表增删改查点击进入码云Git下载点击进入CSDN下载项目结构: 项目代码就不全部贴出来了,只贴下核心代码.需要项目的自己可以去下载. package com.atgui ...

随机推荐

linux环境下快速安装Mariadb和Redis
一 Mariadb(Mysql)篇 1.新建一个yum源仓库 touch /etc/yum.repos.d/Mariadb.repo 2.在这个yum源仓库文件中,添加仓库url地址 [mariadb ...
【Python实战】使用Python连接Teradata数据库？？？未完成
1.安装Python 方法详见:[Python 05]Python开发环境搭建 2.安装Teradata客户端ODBC驱动安装包地址:TTU下载地址 (1)安装TeraGSS和tdicu(ODBC依 ...
【Python 02】计算机与程序设计
计算机根据一系列指令对数据进行处理的工具或机器. 特征: 可以进行计算根据指令执行任务组成: 运算器+控制器(CPU) 存储器(内存及硬盘):内存存储临时数据.硬盘存储相对永久的数据输入设备和 ...
.NET CORE学习笔记系列(6)——KestrelServer
原文:http://www.cnblogs.com/artech/p/KestrelServer.html 跨平台是ASP.NET Core一个显著的特性,而KestrelServer是目前微软推出了 ...
【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
Linux：Day13(上) CentOS系统启动流程
CentOS 5和6的启动流程 Linux:kernel+rootfs kernel:进程管理.内存管理.网络管理.驱动程序.文件系统.安全功能 rootfs: glibc 库:函数集合,functi ...
【css3】使用filter属性实现改变svg图标颜色
1.兼容性: 2.应用场景:新增页面上传svg图标后,更改图标颜色后,在列表页面展示色值改后的svg图标. 3.解决方案:使用filter属性中的 drop-shadow,drop-shadow滤镜可 ...
Openwrt无线中继设置并访问外网
Openwrt无线中继设置并访问外网本篇博文参考来自:http://blog.csdn.net/pifangsione/article/details/13162023 配置目标主路由器使用AP模 ...
SoapUI 学习总结-01 环境配置
遇到的问题 1,怎么SoapUI的Request URL不支持大写怎么办? 问题:在SoapUI的Request URL中,每次输入的URL中含有的大写字母会自动转换为小写字母,导致请求不了对应的地址 ...
C++ 中 auto 与 decltype 的用法与区别
最近在恶补 C++ 知识的时候,学习到了一些 C++11 标准的新特性,利用这些新特性,我们能够更快地提高编程效率,从而实现我们的目标,在此特意记下学习过程中所学习到的一些东西,方便日后的回顾和复习. ...

Jquery+php 动态web表单增删改查

Jquery+php 动态web表单增删改查的更多相关文章

随机推荐

热门专题