欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡單的js表格操作

 更新時間：2016年09月24日 11:52:42   作者：湘湘_Saling  
這篇文章主要為大家詳細介紹了簡單的js表格操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下

效果圖：

 

任務：

 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. 點擊添加按鈕，能動態(tài)在最后添加一行 

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

 以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論