elelmentui(elelmentui精美登录页面)

element UI 表格怎么实现行内编辑

以下是纯js+html实现的增删改操作代码，你可以参考以下。当然也可以使用jquery之类的框架来实现，最终的原理都是一样的。

tr{text-align:center;}

//通过新增按钮来控制表格的显示与隐藏varoptionFlag=”save”;varupdateRowIndex=-1;varcheckFlag=false;//默认为不显示functionshow(){optionF奇闻异事素材网站lag=”save”;varf=document.getElementById(“did”);//获得id为did的divif(!checkFlag){f.style.visibility=”visible”;}else{f.style.visibility=”hidden”;}checkFlag=!checkFlag;}//通过保存按钮将数据添加到表格中functioninsertRow_(){switch(optionFlag){case”save”:insertRow_$save();break;case”update”:insertRow_$update();break;default:alert(“操作失败。。。”);}functioninsertRow_$save(){//通过id获得要添加数据的表格vartable=document.getElementById(“tableid”);//将所输入的内容赋给定义的变量vartitleName=document.getElementById(“title”).value;vardigestName=document.getElementById(“digest”).value;varauthorName=document.getElementById(“author”).value;//获取下拉框内的内容varselectIndex_=document.getElementById(“select”);varoption=selectIndex_.options[selectIndex_.selectedIndex];varselectName=option.text;//获取编号的内容varnumberid=table.rows.length;//在表尾添加一行数据varrow_=table.insertRow(table.rows.length);row_.insertCell(0).innerHTML=numberid;row_.insertCell(1).innerHTML=titleName;row_.insertCell(2).innerHTML=digestName;row_.insertCell(3).innerHTML=authorName;row_.insertCell(4).innerHTML=selectName;row_.insertCell(5).innerHTML=’‘;document.getElementById(“title”).value=””;document.getElementById(“digest”).value=””;document.getElementById(“author”).value=””;document.getElementById(“select”).options[0].selected=”true”;varf=document.getElementById(“did”);f.style.visibility=”hidden”;alert(“保存数据成功！！！”);}//修改后的保存vartr;functioninsertRow_$update(){vartable=document.getElementById(“tableid”);tr=table.rows[updateRowIndex];varp=document.getElementById(“title”);tr.cells[1].innerHTML=p.value;p=document.getElementById(“digest”);tr.cells[2].innerHTML=p.value;p=document.getElementById(“author”);tr.cells[3].innerHTML=p.value;p=document.getElementById(“select”);varIndex_=p.selectedIndex;varoption=p.options[Index_];varselectName=option.text;tr.cells[4].innerHTML=selectName;document.getElementById(“title”).value=””;document.getElementById(“digest”).value=””;document.getElementById(“author”).value=””;document.getElementById(“select”).options[0].selected=”true”;varf=document.getElementById(“did”);f.style.visibility=”hidden”;alert(“修改数据成功。。。”);}}//通过删除按钮删除当前所在行functiondelete_(row_){vartable=document.getElementById(“tableid”);table.deleteRow(row_.rowIndex);refurbish_();alert(“删除数据成功！！！”);}//刷新functionrefurbish_(){vartable=document.getElementById(“tableid”);//获得table的行数varrows=table.rows;for(vari=1;i