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 ...
随机推荐
- jsonpath 使用教程(快速处理dict的深度查询)
一 简介 JSONPath - 用于JSON的XPath 用来解析多层嵌套的json数据;JsonPath 是一种信息抽取类库,是从JSON文档中抽取指定信息的工具. 二 安装 安装方法:pip in ...
- python开发【lambda篇】
lambda 与 python 高级函数的配套使用 filter函数 过滤 __author__ = "Tang" # filter(lambda, []) people = [' ...
- git 忽略 .idea文件
多人开发时,会出现明明在gitignore中忽略了.idea文件夹,但是提交时仍旧会出现.idea内文件变动的情况 原因.idea已经被git跟踪,之后再加入.gitignore后是没有作用的 解决办 ...
- Linux-基础学习（一）-基本命令
开始今日份整理 1.Linux的文件目录操作 1.1 ls 简述:ls是list的缩写,用于列出指定目录或文件 常用的选项 1 -a:显示所有档案及目录(ls内定将档案名或目录名称为“.”的视为隐藏, ...
- docker 安装 mongodb
1.docker search mongo 2.docker pull mongo 3.//docker run -d --name mymongo -p 27017:27017 -v /home/h ...
- 使用 ESP8266 制作 WiFi 干扰器 - 无需密码即可使用任何 WiFi
嘿,朋友,我是 Kedar,你有没有想阻止所有的 WiFi信号?或者只是想从 WiFi 踢某人或邻居 WiFi .那么,本玩法是你等待结束的时刻了.这是为你提供的.仅需 $8 的 DIY Wifi 干 ...
- 如何用php实现分页效果
分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果 首先,我们需要准备在数据库里面准备一个表,并且插入数据,这些都是必需的前提工作了,不多说,如图所示(库名为jer ...
- Jmeter名词注解
取值 ${ip}排除 .*\.js .*\.css .*\.png .*\.gif .*\.msp .*\.js 提取值 (.+?) (.*?)[() 括起来的部分就是需要提取的,对于你要提的内容需要 ...
- Spring 使用纯注解方式完成IoC
目录 创建一个简单的Person类 使用xml方式配置Spring容器并获取bean的过程 创建xml配置文件 进行测试 使用纯注解方式配置Spring容器并获取bean的过程 创建spring配置类 ...
- OpenCV__elemSize
elemSize 矩阵一个元素占用的字节数,例如:type是CV_16SC3,那么elemSize = 3 * 16 / 8 = 6 bytes elemSize1 矩阵元素一个通道占用的字节数,例如 ...