要求:
鼠标移到不同行上时背景色改为蓝色,移开鼠标时则恢复为原背景色 白色
点击添加按钮,能动态在最后添加一行
点击删除按钮,则删除当前行
new documentwindow.onload = function (){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var rows = document.getElementsByTagName("tr");
for(var i=0; i
makeChange(rows[i]);
}
}
function makeChange(obj){
obj.onmouseover = function(){
changeColor(this);
}
obj.onmouseout = function(){
clearColor(this);
}
}
function changeColor(x){
x.style.backgroundColor = "blue";
}
function clearColor(x){
x.style.backgroundColor = "white";
}
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
var number = 3;
var a=1;
function addRow(){
var table = document.getElementById('table');
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var id = document.createTextNode("xh00" + number++);
td1.appendChild(id);
var td2 = document.createElement("td");
var name = document.createTextNode("机器" + a++);
td2.appendChild(name);
var td3 = document.createElement("td");
var func = document.createElement("a");
func.innerText = "删除";
func.href = "javascript:void(0)";
func.onclick = function(){deleteRow(this)};
td3.appendChild(func);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
makeChange(tr);
table.appendChild(tr);
}
// 创建删除函数
function dele(obj){
var t= obj.parentNode.parentNode.parentNode;
t.removeChild(obj.parentNode.parentNode);
}
学号 | 姓名 | 操作 |
---|---|---|
xh001 | 王小明 | 删除 |
xh002 | 刘小芳 | 删除 |