对表格的增删改查

Title

.main{

width:500px;

margin:0auto;

}

td,th{

width:100px;

text-align:center;

}

#input{

width:350px;

}

#stu{

color:red;

}

functiondelRow(obj) {

$(obj).parent().parent().remove();

}

functionaddRow() {

varinput=$('#input').val();

vartab=document.getElementById("tab");

if(input==""){

$('#stu').html('输入数据不能为空！')

return;

}

vararr=input.split(" ");

for(vari=0;i

if(arr[0] ==tab.rows[i].cells[0].innerHTML) {

$('#stu').html("该学号已存在！");

return;

}

}

varrow=document.createElement("tr");

row.innerHTML=`${arr[0]}

${arr[1]}

${arr[2]}

`

$('#tab').append(row);

}

$(function(){

$("td").click(function(event){

//td中已经有了input,则不需要响应点击事件

if($(this).children("input").length>0)

return false;

vartdObj=$(this);

varpreText=$(this).html();

//得到当前文本内容

varinputObj=$("");

//创建一个文本框元素

//                tdObj.html(""); //清空td中的所有元素

$(this).empty();

inputObj

.width($(this).width())

//设置文本框宽度与td相同

.height($(this).height())

.css({border:"0px",fontSize:"17px",font:"宋体"})

.val(preText)

.appendTo($(this))

//把创建的文本框插入到tdObj子节点的最后

.trigger("focus")

//用trigger方法触发事件

.trigger("select");

inputObj.keyup(function(event){

if(13== event.which)

//用户按下回车

{

vartext=$(this).val();

tdObj.html(text);

}

else if(27== event.which)

//ESC键

{

tdObj.html(preText);

}

});

//已进入编辑状态后，不再处理click事件

inputObj.click(function(){

return false;

});

});

});

functionsearchRow() {

varid=$('#id').val();

vartab=document.getElementById("tab");

varname;

varstuClass;

for(vari=0;i

if(id==tab.rows[i].cells[0].innerHTML){

name=tab.rows[i].cells[1].innerHTML;

stuClass=tab.rows[i].cells[2].innerHTML;

varstr=`学号：${id}

姓名：${name}

班级：${stuClass}`;

$('#stu').html(str);

return;

}

}

$('#stu').html("该学号不存在");

}

学号

姓名

班级

操作

1001

岳华飞

计科

1002

阿飞

计科

1003

阿香

计科