DOM拓展表格小练习
涉及的知识点
DOM操作HTML页面、DOM操控表格、一些基本的事件、遍历知识、数组字符串知识、函数的作用域知识
效果图
html代码
<body>
<div id="container">
<p>DOM操作表格加简单的正则验证</p>
姓名<input type="text" id="name"><br/>
年龄<input type="text" id="age"><br/>
性别<input type="text" id="sex"><br/>
搜索姓名<input type="text" id="searchtext">
<input type="button" value="添加" id="add">
<input type="button" value="搜索" id="searchbtn">
<input type="button" value="年龄排序" id="rank">
<input type="submit" value="提交" id="submits">
<table id="table">
<thead>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</thead>
<tbody>
<tr>
<td></td>
<td>张三</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td></td>
<td>李四</td>
<td></td>
<td>女</td>
</tr>
<tr>
<td></td>
<td>王五</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td></td>
<td>Mike</td>
<td></td>
<td>男</td>
</tr>
</tbody>
</table>
</div>
</body>
css代码
body{
margin:;
padding:;
background:grey;
}
#container{
margin:100px auto;
width:600px;
height:600px;
background:#fff;
box-shadow: 1px 1px 1px #ccc;
}
p{
font-size:20px;
font-weight:bold;
}
#table{
border-collapse:collapse;
margin-top:15px;
}
#table tr td{
width:100px;
height:50px;
border:1px solid #ccc;
text-align:center;
font-size:20px;
}
</style>
js代码
<script>
// var name=document.getElementById("name") //在这里可引用，可不引用
// var age=document.getElementById("age")
// var sex=document.getElementById("sex")
var add=document.getElementById("add")
var searchtext=document.getElementById("searchtext")
var searchbtn=document.getElementById("searchbtn")
var rank=document.getElementById("rank")
var table=document.getElementById("table")
var oldBackground=""
var oldColor=""
var number=table.tBodies[0].rows.length //添加表格内容
add.onclick=function(){
//js作用域问题，外部所取到的仅仅为文本框，未定义则为undefined;只有将获得内容放在点击时的函数里面时候,才能获取到内容
var name=document.getElementById("name").value.toLowerCase() //再次定义获取到文本框的内容
var age=document.getElementById("age").value
var sex=document.getElementById("sex").value var Tr=document.createElement("tr") //创建行 var td=document.createElement("td")
number++
number=number<10?"0"+number:number
td.innerHTML=number
Tr.appendChild(td) var td=document.createElement("td") //创建单元格
td.innerHTML=name
Tr.appendChild(td) var td=document.createElement("td")
td.innerHTML=age
Tr.appendChild(td) var td=document.createElement("td")
td.innerHTML=sex
Tr.appendChild(td) var td=document.createElement("td")
td.innerHTML="<a href='javascript:void(0)' class='remove'>删除</a>"
Tr.appendChild(td)
remove=document.getElementsByClassName("remove")
for(var i=0;i<remove.length;i++){
remove[i].onclick=function(){
td.removeChild(this.parentNode.parentNode)
}
} table.tBodies[0].appendChild(Tr) //插入行 }
//搜索表格内容
searchbtn.onclick=function(){
if(document.getElementById("searchtext").value==""){
alert("您搜索的内容不存在")
}
for(var i=0;i<table.tBodies[0].rows.length;i++){ //遍历每一行
var searchText=document.getElementById("searchtext").value.toLowerCase()
var cellValue=table.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase() var arr=searchText.split("")
table.tBodies[0].rows[i].style.background=oldBackground
table.tBodies[0].rows[i].style.color=oldColor
for(var j=0;j<arr.length;j++){ //遍历arr中的字符
if(cellValue.search(arr[j])!=-1&&searchText!=""){ //字符串的匹配
table.tBodies[0].rows[i].style.background="#ccc"
table.tBodies[0].rows[i].style.color="#fff"
}
}
}
} //每行鼠标触发变颜色
for(var i=0;i<table.tBodies[0].rows.length;i++){
table.tBodies[0].rows[i].onmouseover=function(){
oldBackground=this.style.background
oldColor=this.style.color
this.style.background="#ccc"
this.style.color="#fff"
}
table.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldBackground
this.style.color=oldColor
}
if(i%2){ //隔行变色
table.tBodies[0].rows[i].style.background="#eee"
}
} //排序,利用的是添加已存在的节点时，新节点替换旧节点，以及数组sort方法
rank.onclick=function(){
var newarry=[]
for(var i=0;i<table.tBodies[0].rows.length;i++){
newarry[i]=table.tBodies[0].rows[i]
}
newarry.sort(function(tr1,tr2){ //这里的两个参数是数组中的比较
var n1=parseInt(tr1.cells[2].innerHTML)
var n2=parseInt(tr2.cells[2].innerHTML)
return n1-n2
})
for(var i=0;i<newarry.length;i++){ //重新添加tbody中
table.tBodies[0].appendChild(newarry[i])
}
} </script>
DOM拓展表格小练习的更多相关文章
- 第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...
- DOM操作表格
前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量 ...
- 采用DOM进行表格的修改操作
2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...
- DOM系列---DOM操作表格
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一．操作表格 <table>标签是H ...
- DOM操作表格——HTML DOM
html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> < ...
- DOM拓展
DOM拓展 1.选择符API 所谓选择符API即是根据css选择符选择与某个模式相匹配的DOM元素,jQuery的核心就是通过css选择符查询DOM文档取得元素的引用,从而抛弃了原有繁琐的getELe ...
- Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合
操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...
- DOM中表格的操作方法总结
DOM中表格的操作方法总结 <table/>元素的方法如下: caption:指向<caption/>元素(如果存在): tBodies:<tbody/>元素的集合 ...
随机推荐
- 「mysql优化专题」高可用性、负载均衡的mysql集群解决方案（12）
一.为什么需要mysql集群? 一个庞大的分布式系统的性能瓶颈中,最脆弱的就是连接.连接有两个,一个是客户端与后端的连接,另一个是后端与数据库的连接.简单如图下两个蓝色框框(其实,这张图是我在悟空问答 ...
- C# 接口使用方法
之前一直不理解接口这一概念,今天无意中翻书,网上查资料悟道其中的道理,现在工作没有用到interface这一块,怕以后会遇到忘记实现的方法便记录下来,哪里写的不对希望读者指出,话不多说,接下来看我对接 ...
- 工作随笔——selenium支持post请求，支持自定义header
背景: 最近在写一个小程序,发现博主所在的地区访问该网站时有防ddos功能验证导致程序不能正常工作. 经过试验发现可以用国外代理ip解决这个问题,但是程序走代理访问延迟高且不稳定. 思路: selen ...
- 你的Excel表格颜色搭配的对么？
在昨天的文章中,我们讨论了<Excel表格制作的基本九大原则>,今天我们还要继续聊聊,Excel表格的颜色搭配规则. 一个表格的美丑与否,除了基本的格式之外,如何配色也是非常关键的,如果只 ...
- go实例之排序
1.默认排序 使用sort包进行排序.排序是就地排序,因此它会更改给定的切片,并且不返回新的切片. package main import "fmt" import "s ...
- python 动态加载类对象
第一步 加载模块 module =__import__("modulename",fromlist=['']) 第二部 加载类对象 cls = getattr(module, & ...
- KVM（二）：KVM应用
++++++++++++++++++++++++++++++创建和拍摄快照++++++++++++++++++++++++++++++++++ KVM快照方法常用的是qemu-img snapshot ...
- JDK8.0新特性
连接转载地址:http://www.2cto.com/kf/201609/544044.html Eclipse: http://aiyiupload.oss-cn-beijing.aliyuncs. ...
- tar: This does not look like a tar archive tar: Skipping to next header tar: Exiting with failure status due to previous errors
解压一个.tar.zip文件时报错 tar -zxvf bcl2fastq2-v2---linux-x86-.zip tar: This does not look like a tar archiv ...
- Mysql的硬件优化和配置优化
mysql数据库的优化,算是一个老生常谈的问题了,网上也有很多关于各方面性能优化的例子,今天我们要谈的是MySQL硬件优化和系统参数的优化-即优化my.cnf文件 MySQL的优化我分为两个部分,一是 ...