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

时间：2023-03-09 05:36:51
Jquery+php 动态web表单增删改查

如这类效果：

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

}

}

?>