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/>元素的集合 ...
随机推荐
- Spring：Bean生命周期
关于Bean生命周期,我在网上找了两张图: 图1: 图2: 总结起来就是: Bean构建: Bean对象创建 > @Autowired | @Resource> @PostConstruc ...
- WebUploader分片断点上传文件（二）
写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...
- wordpress 登录实例（一）
wordpress搭建参考 关于wordpress环境的搭建,地址是:http://easonhan007.github.io/2014/04/08/install-wamp-and-wordpres ...
- MySQL时间操作的系统函数用法
我要查询获得当天凌晨30分的datetime值的方式:select ADDDATE(CURDATE(), INTERVAL TIME_TO_SEC(TIMEDIFF("00:30:00&qu ...
- Java中 &&与&，||与|的区别
区别 && || 是逻辑运算,支持短路运算 & | 是位运算,不支持短路运算 短路运算 当有多个表达式时,左边的表达式值可以确定结果时,就再继续运算右边的表达式的值; 举例 ...
- 微信JS-SDK使用步骤(以微信扫一扫为例)
概述: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...
- ZooKeeper如何保证单一视图
由于ZooKeeper的数据模型简单且全部在内存中,ZooKeeper的速度非常快.它提供了一系列保证: • 顺序一致性 • 原子性 • 单一视图 • 可靠性 • 实时性 下面将结合源码(3.4.10 ...
- UWP 应用通知Notifications
之前说UWP 使用OneDrive云存储2.x api(二)[全网首发],微识别实现了上传下载的功能,那么为了给用户更上一层楼的体验,那就是在上传下载完成之后,弹出一通知Notifications. ...
- 轻量级quill富文本编辑器
因为公司产品需要在移动端编辑文本,所以发现了这个轻量级的好东西,网上也没找到比较好的案例,就自己总结了下,有兴趣的直接复制代码运行看看就知道啦! 下面是quill.js的CDN加速地址: <!- ...
- 关于 dos 下 npm 命令的使用
npm install 可以安装模块,后面跟 -g 安装全局的,后面跟包的名字就是安装指定的包 npm uninstall <安装包的名字> 卸载某个包,后面跟 -g 是卸载全局的某个包 ...