对表格的增删改查
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
阿香
计科
