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 ); } } ?>
