如这类效果：
例一：简单
<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 );
} }
?>