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存储过程之游标实战 博主日前在解决一个项目需求时,没有什么好的方法,于是就来学习存储过程了,之前也是接触过,奈何年少贪玩,竟是全部又还给了大学老师-苦不堪言呐-. 先说一下业务需求吧 ...
- 如何连接别人电脑上的Oracle数据库--duende99
需要一些前提条件: 1.对方的主机能被连接(如在同一局域网内) 2.需要知道对方数据库IP.端口号.服务名 3.需要知道对方提供的管理数据库的用户名及密码 连接方法: 1.在本地的oracle安装目录 ...
- 【批处理】shift用法举例
@echo off set sum=0 call :sub sum 1 2 3 4 echo sum=%sum% pause :sub set /a %1=%1+%2 shift /2 if not ...
- html查看器android
1.android的API提供了访问网络的一个类HttpURLConnection 2.通过发送GET请求获取服务器返回的html代码 3.先看看布局文件,如下所示, <?xml version ...
- 637. Average of Levels in Binary Tree
Given a non-empty binary tree, return the average value of the nodes on each level in the form of an ...
- 关于foo的一个面试题
今天看到一个关于foo的一个面试题,赶脚特别有意思 function foo(){// 第16行 getName = function(){console.log(1)} return this } ...
- Prism for WPF再探（基于Prism事件的模块间通信）
上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...
- CSS3媒体查询(Media Queries)介绍
媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) ...
- permission denied for window type 2003
今天在做系统悬浮窗的时候出现权限拒绝,类型是2003,这里要说下,做系统悬浮窗需要申请权限,6.0以上的 还需要动态申请下,这里我就不过多描述了, 我在申请完权限后仍然不行,这里主要是出现在了这个类型 ...
- 砸黑板！ 正则表达式！！！re 模块
模块是什么? 一个模块就是一个包含了 python 定义和声明的文件,文件名就是模块名字加上.py 的后缀. 但其实 import 加载的模块分为四个通用类别: 1:使用 python 编写的代码(. ...