JQuery实现数据录入表格以及删除与编辑功能

这是我在老师布置的JQuery作业上增加了自己的想法（增加了删除与编辑功能）原任务很简单只是利用JQuery将输入的数据添加到表格中

先看看效果吧

点击录入

点击第一行的删除

点击第一行的编辑

点击确认即可修改

点击取消即不做修改

接下来看代码吧（很粗糙）

<!DOCTYPE html>

<html>

<head>

</head>

<style>

#header{

margin: auto;

text-align: center;

}

#info thead th,#info tbody td{

width: 100px;

height: 20px;

}

</style>

<body>

<p3>考试成绩录入</p3>

<tr><td align="right">JAVA成绩：</td><td><input id="java_info"/></td></tr>

<tr><td align="right">SQL成绩：</td><td><input id="sql_info"/></td></tr>

</table>

</div>

<br>

<thead>

<th>学号</th><th>姓名</th><th>JAVA成绩</th><th>SQL成绩</th><th>JS成绩</th><th>删除</th><th>编辑</th>

</thead>

</table>

</body>

var info1,info2,info3,info4,info5;//定义全局变量接收修改之前单元格的数据

var trindex = 0;//定义一个下标区分每一行

//添加input中的数据带表格中

function fun(){

var stu_id = $("#stu_id").val();

var stu_name = $("#stu_name").val();

var java_info = $("#java_info").val();

var sql_info = $("#sql_info").val();

var js_info = $("#js_info").val();

var str = $("<tr id='tr"+trindex+"'></tr>");

str.append($("<td id='info1'>"+stu_id+"</td>"));

str.append($("<td id='info2'>"+stu_name+"</td>"));

str.append($("<td id='info3'>"+java_info+"</td>"));

str.append($("<td id='info4'>"+sql_info+"</td>"));

str.append($("<td id='info5'>"+js_info+"</td>"));

str.append($("<td >"+"<a href='#' οnclick='delete1("+trindex+")'>删除</a>"+"</td>"));

str.append($("<td id='choose"+trindex+"'>"+"<a href='#' οnclick='change1("+trindex+")'>编辑</a>"+"</td>"));

trindex+=1;

$("#tbody").append(str);

$("#stu_id").val("");

$("#stu_name").val("");

$("#java_info").val("");

$("#sql_info").val("");

$("#js_info").val("");

};

//删除表格

function delete1(trindex){

$("#tr"+trindex).remove();

};

//选中这一行所有的td

function change1(trindex){

//根据传进来的index找到这一行的<td>

var tds = $("#tr"+trindex+" td[id^='info']");

info1 = tds[0].innerText;

info2 = tds[1].innerText;

info3 = tds[2].innerText;

info4 = tds[3].innerText;

info5 = tds[4].innerText;

$("#choose"+trindex).empty();

$("#choose"+trindex).append($("<a href='#' οnclick='yes("+trindex+")'>确认</a>   <a href='#' οnclick='no("+trindex+")'>取消</a>"));

//创建鼠标单击事件

tds.click(function(){

//获取被选取的单元格

var tdObj = $(this);

//获取被选中的单元格文本

var tdObjText = $(this).text();

//清除单元格的内容

tdObj.empty();

//创建文本框

var inputObj = $("<input type='text' value='" + tdObjText + "'/>");

//取消单元格的click()事件

inputObj.click(function () {

return false;

});

//去掉文本框的边框

inputObj.css("border-width", 0);

//使文本框的宽度和td的宽度相同

inputObj.width(tdObj.width());

inputObj.height(tdObj.height());

//去掉文本框的外边距

inputObj.css("margin", 0);

inputObj.css("padding", 0);

// inputObj.css("text-align", "center");

// inputObj.css("font-size", "16px");

inputObj.css("background-color", tdObj.css("background-color"));

//将文本框放入单元格中

tdObj.append(inputObj);

//当文本框失去焦点的时候设置文本内容

inputObj.blur(function(){

var newtext = inputObj.val();

tdObj.text(newtext);

});

//全选

// inputObj.trigger("focus").trigger("select");

});

};

//确认修改移除绑定事件

function yes(trindex){

var tds5 = $("#tr"+trindex+" td[id^='info']");

tds5.unbind("click");

$("#choose"+trindex).empty();

$("#choose"+trindex).append($("<a href='#' οnclick='change1("+trindex+")'>编辑</a>"));

};

//取消修改

function no(trindex){

var tds5 = $("#tr"+trindex+" td[id^='info']");

tds5[0].innerText = info1;

tds5[1].innerText = info2;

tds5[2].innerText = info3;

tds5[3].innerText = info4;

tds5[4].innerText = info5;

//解绑click事件

tds5.unbind("click");

$("#choose"+trindex).empty();

$("#choose"+trindex).append($("<a href='#' οnclick='change1("+trindex+")'>编辑</a>"));

};

</script>

</html>

最后还有一个小问题编辑的时候点击单元格会被撑大一点有痕迹我看了很久没想通...