用js操作表格

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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. 点击添加按钮,能动态在最后添加一行

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

 

以上是关于用js操作表格的主要内容,如果未能解决你的问题,请参考以下文章

用js创建的可编辑的bootstrap表格。

用js实现动态添加表格数据

js操作table表格导出数据到excel方法

原生js实现表格的增删改查

用原生js对表格排序

JS(JavaScript)创建不规则表格 ,请高手帮忙实现一下啊