简单的js表格操作效果图:
任务:
1. ⿏标移到不同⾏上时背景⾊改为⾊值为 #f2f2f2,移开⿏标时则恢复为原背景⾊ #fff var ElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
bgcChange(tr[i]);
}
// ⿏标移动改变背景,可以通过给每⾏绑定⿏标移上事件和⿏标移除事件来改变所在⾏背景⾊。function bgcChange(obj)
{
obj.style.backgroundColor="#f2f2f2";
}
obj.style.backgroundColor="#fff";
}
}
2. 点击添加按钮,能动态在最后添加⼀⾏
js教程removechildvar num=2;
function add(){
num++;
var ateElement("tr");
var ateElement("td");
var ateElement("td");
xh.innerHTML="xh00"+num;
xm.innerHTML="第"+num+"位学⽣";
var ateElement("td");
del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
var ElementById("table");
tab.appendChild(tr);
tr.appendChild(xh);
tr.appendChild(xm);
tr.appendChild(del);
var tr = ElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
bgcChange(tr[i]);
}
}
3. 点击删除按钮,则删除当前⾏
function del(obj)
{
var tr=obj.parentNode.parentNode;
veChild(tr);
}
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。