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

随机推荐

【Teradata】使用arcmain进行不落地数据迁移（管道）
1.备份脚本准备 //脚本bak_ds.arc .logon 192.168.253.222/sysdba,learning1510; archive data tables(DS) ,release ...
Redis学习笔记（3）——Redis的命令大全
Redis是一种nosql数据库,常被称作数据结构服务器,因为值(value)可以是字符串(String), 哈希(Map), 列表(list), 集合(sets) 和有序集合(sorted se ...
ios和安卓H5交互桥接
ios交互 demo1(摘自网络) <!doctype html> <html> <head> <meta charset="UTF-8" ...
初识服务发现及Consul框架的简单使用
初识服务发现及Consul框架的简单使用 1.什么是服务发现? 服务发现组件记录了(大规模)分布式系统中所有服务的信息,人们或者其它服务可以据此找到这些服务. DNS 就是一个简单的例子. 当然, ...
jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）
前言因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
关于Jpa和Mybatis的一些看法
现在网络上充斥着Jpa和Mybatis的一些对比.其实狭义上来说是hibernate和mybatis之间的比较. 例如:为什么感觉国内比较流行的 mybatis 在国外好像没人用的样子? 下面是一些截 ...
即将发布的 ASP.NET Core 2.2 会有哪些新玩意儿？
今年 6 月份的时候时候 .NET 团队就在 GitHub 公布了 ASP.NET Core 2.2 版本的 Roadmap(文末有链接),而前两天 ASP.NET Core 2.2 预览版 2 已经 ...
判断语句之if..else if...else
判断语句之if..else if...else if语句第三种格式:if..else if...else 格式: 执行流程首先判断关系表达式1看其结果是true还是false 如果是true就执行语 ...
c语言之控制语句：循环
#include<stdio.h> int main(void) { long num; long sum = 0L; int status; printf("Please en ...
yum设置本地源
创建本地源的文件要放入yum.repos.d目录下,名字随便取,但是后缀要求是.repo 1创建目录 mkdir -p /mnt/cdrom 2虚拟机挂载光盘 mount /dev/cdrom /mn ...

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

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

随机推荐

热门专题