<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript">
var sexArr=new Array("female","male");
var removeArr=new Array();
var addArr=new Array();
var addCount=0;
var removeCount=0;
function removeRows()
{
var ckArr=$("input[name='rows']");
for(var i=0;i<ckArr.length;i++)
{
var currentCheckBox=ckArr[i];
var val=currentCheckBox.checked;
debugger;
if(val==true)
{
var currenRow=$(currentCheckBox).parent().parent();
var tdcon=$(".tdcontent")
/*removeArr[removeCount]=new Array(tdcon[0].innerText,tdcon[1].innerText,tdcon[2].innerText);
removeCount++;
for(var i=0;i<removeArr.length;i++)
{
alert("姓名："+removeArr[i][0]+" 年龄："+removeArr[i][1]+" 性别："+removeArr[i][2]+"</br>");
}*/
currenRow.remove();
}
}
}
function txtInputBlur(inputTxt)
{
var txtInputCount=$(inputTxt).val();
var parent=$(inputTxt).parent();
$(inputTxt).remove();
parent.text(txtInputCount);
parent.bind("click",function(){
tdClick(this);
});
}
function tdClick(td)
{
debugger;
var txt =$(td).text();
var txtInput="<input type='text' value='"+txt+"' onblur='txtInputBlur(this)' />";
$(td).html(txtInput);
$(td).unbind("click");
$(td).removeAttr("onclick");
$(td).children("input").focus();
}
function addRow()
{
var charcode=Math.floor(Math.random()*26)+97;
var tempName=String.fromCharCode(charcode,charcode,charcode);
var tempAge=18+Math.round(7*Math.random());
var sexIndx=Math.round(Math.random());
var newRow="<tr id=\"myId\"><td><input type=\"checkbox\" name=\"rows\" /></td><td onclick='tdClick(this)'>"+tempName+"</td><td onclick='tdClick(this)'>"+tempAge+"</td><td onclick='tdClick(this)'>"+sexArr[sexIndx]+"</td></tr>";
$("#mytable").append(newRow);
addArr[addCount]=new Array(tempName,tempAge,sexArr[sexIndx]);
addCount++;
for(var i=0;i<addArr.length;i++)
{
//console.log("姓名："+addArr[i][0]+" 年龄："+addArr[i][1]+" 性别："+addArr[i][2]+"</br>");
}
}
$(document).ready(function(){
$(".tdcontent").bind("click",function(){
tdClick(this);
});
});
</script>
</head>
<body>
<center>
<table width="80%" border=1 id="mytable">
<tr>
<th>Operte</th><th>Name</th><th>Age</th><th>Sex</th>
</tr>
<tr id="myId">
<td><input type="checkbox" name="rows" /></td>
<td class="tdcontent">aaa</td>
<td class="tdcontent">18</td>
<td class="tdcontent">female</td>
</tr>
</table>
<input type="button" value="add" onclick="addRow()" />
<input type="button" value="remove" onclick="removeRows()" />
</center>
</body>
</html>
点击保存的时候ajax 将修改后的数据发送到后端，更新数据库即可