對(duì)表格的增刪改查

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('輸入數(shù)據(jù)不能為空!')

return;

}

vararr=input.split(" ");

for(vari=0;i

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

$('#stu').html("該學(xué)號(hào)已存在!");

return;

}

}

varrow=document.createElement("tr");

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

${arr[1]}

${arr[2]}

`

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

}

$(function(){

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

//td中已經(jīng)有了input,則不需要響應(yīng)點(diǎn)擊事件

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

return false;

vartdObj=$(this);

varpreText=$(this).html();

//得到當(dāng)前文本內(nèi)容

varinputObj=$("");

//創(chuàng)建一個(gè)文本框元素

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

$(this).empty();

inputObj

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

//設(shè)置文本框?qū)挾扰ctd相同

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

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

.val(preText)

.appendTo($(this))

//把創(chuàng)建的文本框插入到tdObj子節(jié)點(diǎn)的最后

.trigger("focus")

//用trigger方法觸發(fā)事件

.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);

}

});

//已進(jìn)入編輯狀態(tài)后,不再處理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=`學(xué)號(hào):${id}

姓名:${name}

班級(jí):${stuClass}`;

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

return;

}

}

$('#stu').html("該學(xué)號(hào)不存在");

}


學(xué)號(hào)

姓名

班級(jí)

操作

1001

岳華飛

計(jì)科

1002

阿飛

計(jì)科

1003

阿香

計(jì)科

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容