簡單的js表格操作_javascript技巧

效果圖：

 

任務：

 1. 滑鼠移到不同行上時背景色改為色值為 #f2f2f2，移開滑鼠時則恢複為原背景色 #fff 

var tr=document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { bgcChange(tr[i]); } // 滑鼠移動改變背景,可以通過給每行綁定滑鼠移上事件和滑鼠移除事件來改變所在行背景色。function bgcChange(obj) { obj.onmouseover=function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout=function(){ obj.style.backgroundColor="#fff"; } }

2. 點擊添加按鈕，能動態在最後添加一行 

var num=2; function add(){ num++; var tr=document.createElement("tr"); var xh=document.createElement("td"); var xm=document.createElement("td"); xh.innerHTML="xh00"+num; xm.innerHTML="第"+num+"位學生";var del=document.createElement("td"); del.innerHTML="<a href='javascript:;' onclick='del(this)' >刪除</a>"; var tab=document.getElementById("table"); tab.appendChild(tr); tr.appendChild(xh); tr.appendChild(xm); tr.appendChild(del); var tr = document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { bgcChange(tr[i]); } }

 3. 點擊刪除按鈕，則刪除當前行 

function del(obj) { var tr=obj.parentNode.parentNode; tr.parentNode.removeChild(tr); }

 以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。