本文介绍使用JavaScript实现表格的常见交互功能。通过遍历表格行绑定鼠标移入移出事件，实现行背景色在悬停时变为#f2f2f2、恢复时为#fff的效果。同时演示如何动态创建表格行并追加至末尾，以及通过DOM操作删除指定行，提供完整代码参考。
表格行高亮效果实现
效果图如下所示：
具体任务需求：
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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。