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

随机推荐

【Python实战】使用Python连接Teradata数据库？？？未完成
1.安装Python 方法详见:[Python 05]Python开发环境搭建 2.安装Teradata客户端ODBC驱动安装包地址:TTU下载地址 (1)安装TeraGSS和tdicu(ODBC依 ...
vue 首页问题
(现在其实处于不知道自己不知道状态,前端其实很多东东,不信弄个微博试试,还有那些概念的to thi tha) 1.压缩一般 vue-cli已经压缩了比如js 的,一般4M多压缩到 1M,还有css ...
26 python 初学（线程、同步锁、死锁和递归锁）
参考博客: www.cnblogs.com/yuanchenqi/articles/5733873.html 并发:一段时间内做一些事情并行:同时做多件事情线程是操作系统能够进行运算调度的基本单位 ...
openstack-mitaka部署
详见我在51cto的一篇博客:http://egon09.blog.51cto.com/9161406/1839667
HDU-problem-1002-人类史上最大最好的希望事件-矩阵快速幂
Problem Description 作为CNCS的半壁江山,狗哥常常在宇宙中心邵阳眺望黄浦江,夜晚的星空总是迷人,有时候还能见到彗星滑落. 狗哥是幸运的,他在两秒钟内看到了十七颗彗星划过天际,作为 ...
Luogu4755 Beautiful Pair 最值分治、主席树
传送门整天做一些模板题感觉药丸设$val_i$表示第$i$个位置的值看到区间最大值考虑最值分治.对于当前的区间$[l,r]$,找到区间最大值$mid$,递归\([l,mid-1] ...
UITouch - BNR
本节任务:创建一个视图,让用户在视图上拖动手指来画线. UIView类能够重载4个方法来处理不同的触摸事件. - (void)touchesBegan:(NSSet *)touches withEve ...
VisualStudio2017下ASP.NET CORE的TagHelper智能提示不能使用的解决办法
之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, ...
XP_CMDSHELL 执行命令添加 windows 用户的方法
1. 之前看过不少文档可以使用 xp_SQLCMD的命令来进行渗透处理, 今天因为公司的服务器又中毒了自己学习了下. 2. 修改SQLSERVER的设置远程登录数据库 sqlcmd -S 10. ...
Error updating database. Cause: java.sql.SQLException: Access denied for user '${username}'@'localhost' (using password: YES)
导入别人的项目,出现一个错误,经过排查,是db.properties配置文件中的用户名与Mybatis-conf.xml配置文件中调用的用户名不一致所导致的 (db.properties中用的是nam ...

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

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

随机推荐

热门专题