基于javascript实现表格的简单操作

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

这篇文章主要为大家详细介绍了基于javascript实现表格的简单操作，具有一定的参考价值，感兴趣的朋友可以参考一下

本文实例为大家分享了js表格操作的简单方法，供大家参考，具体内容如下

代码如下:

<!DOCTYPE html>

<html>

<head>

<style>

*{

margin: 0;

padding: 0;

}

body{

width: 1000px;

margin: 100px auto;

font-family: "微软雅黑";

font-size: 18px;

background-color: #fff;

}

#table tr{

text-align: center;

}

tbody tr:nth-child(2n+1){

background-color: #ccc;

}

tbody tr:hover{

background-color: green;

}

input[type=text]{

height: 25px;

width: 136px;

background-color: turquoise;

margin-bottom: 10px;

}

</style>

window.onload=function(){

var otb=document.getElementById("table");

var otr=otb.tBodies[0].rows;

var oadd=document.getElementById("add");

var oname=document.getElementById('name');

var osex=document.getElementById('sex');

var id=otr.length+1;

oadd.onclick=function(){

var atr=document.createElement('tr');

var atd1=document.createElement('td');

var atd2=document.createElement('td');

var atd3=document.createElement("td");

var atd4=document.createElement("td");

atd4.innerHTML='<a>删除</a>';

atd1.innerHTML=id++;

atd2.innerHTML=oname.value;

atd3.innerHTML=osex.value;

atr.appendChild(atd1);

atr.appendChild(atd2);

atr.appendChild(atd3);

atr.appendChild(atd4)

otb.tBodies[0].appendChild(atr);

atd4.getElementsByTagName('a')[0].onclick=function(){ otb.tBodies[0].removeChild(this.parentNode.parentNode)

}

var obtn=document.getElementById("btn");

var otxt=document.getElementById("ss");

obtn.onclick=function(){

for(var i=0;i<otb.tBodies[0].rows.length;i++){

var osta=otb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

var ot=otxt.value.toLowerCase();

var oar=ot.split(' ');

otb.tBodies[0].rows[i].style.background='';

for(var j=0;j<oar.length;j++){

if(osta.search(oar[j])!=-1){

otb.tBodies[0].rows[i].style.background='red';

}

</script>

</head>

<body>