js中的DOM操作(2)
1.表格的更加与删除
<!DOCTYPE html>
<html>
<head>
<title>表格操作</title>
<style type="text/css">
table{
border: 1px solid black;
}
tr td{
border: 1px solid black;
width: 50px;
}
</style>
</head>
<body>
<input type="text" placeholder="年龄" id="age">
<input type="text" placeholder="姓名" id="uname">
<button type="button" id="add">增加</button>
<input type="text" placeholder="输入ID号" id="userId">
<button type="button" id="del">删除</button>
<table>
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td><a href="javascript:void(0);">删除</a></td> </tr>
<tr>
<td>3</td>
<td>小王</td>
<td>11</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var uname = document.getElementById('uname');
var age = document.getElementById('age');
var oAdd = document.getElementById('add');
var oDels = document.getElementsByTagName('a');
var oTab = document.getElementsByTagName('table')[0];
var oDel = document.getElementById('del');
var uid = document.getElementById('userId');
var num = oTab.tBodies[0].rows.length;
oAdd.onclick = function (){
var oTr = document.createElement('tr');
var info = new Array();
info.push(++num);
info.push(uname.value);
info.push(age.value);
info.push("<a href='javascript:void(0);'>删除</a>");
var len = info.length;
for(var i=0; i<len;i++){
var oTd = document.createElement('td');
oTd.innerHTML = info.shift();
oTr.appendChild(oTd);
}
oTab.tBodies[0].appendChild(oTr);
for(var i=0; i<oDels.length; i++){
var del = oDels[i];
del.onclick = function (){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
for(var i=0; i<oDels.length; i++){
var del = oDels[i];
del.onclick = function (){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
oDel.onclick = function (){
var id = uid.value;
var rows = oTab.tBodies[0].rows;
for(var i=0; i<rows.length; i++){
if(id == rows[i].cells[0].innerHTML){
var parent = rows[i].cells[0].parentNode;
parent.parentNode.removeChild(parent);
return;
}
}
}
</script>
</body>
</html>
2.鼠标控制每行变色
<!DOCTYPE html>
<html>
<head>
<title>表格操作</title>
<style type="text/css">
table{
border: 1px solid black;
}
tr td{
border: 1px solid black;
width: 50px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>小王</td>
<td>11</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var oTab = document.getElementsByTagName('table')[0];
var oRows = oTab.tBodies[0].rows;
for(var i=0; i<oRows.length; i++){
oRows[i].style.background = "#DCDCDC";
oRows[i].onmouseover = function (){
this.style.background = "gray";
}
oRows[i].onmouseout = function (){
this.style.background = "#DCDCDC";
}
}
</script>
</body>
</html>
3.字符串大小写转换
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var str = "AbCd";
alert(str.toUpperCase());
alert(str.toLowerCase());
</script>
</body>
</html>
4.模糊搜索
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var str = "AbCdef";
//查找时区分大小写,若找到则返回子串的起始位置，否则返回-1
if(str.search("bC") != -1){
alert("find out");
}
</script>
</body>
</html>
5.字符串分割
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var str = "AbCdef 张 小";
//查找时区分大小写,若找到则返回子串的起始位置，否则返回-1
var strEles = str.split(' ');
for(var i=0; i<strEles.length; i++){
alert(strEles[i]);
}
</script>
</body>
</html>
6.列表排序
<!DOCTYPE html>
<html>
<head>
<title>列表排序</title>
</head>
<body>
<button type="button" id="sort">排序</button>
<ul>
<li>13</li>
<li>2</li>
<li>5</li>
<li>4</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
//返回所有li元素集合(全是对象引用)
var oLis = oUl.getElementsByTagName('li');
var arr = new Array();
for(var i=0; i<oLis.length; i++){
arr.push(oLis[i]);
}
//调整数组中引用的顺序
arr.sort(function(li1, li2){
var num1 = parseInt(li1.innerHTML);
var num2 = parseInt(li2.innerHTML);
return num1 - num2;
}); var oBtn = document.getElementById('sort');
oBtn.onclick = function (){
for(var i=0; i<oLis.length; i++){
//如果子节点中有相同的引用,则先将引用删除，再将新的添加到尾部
oUl.appendChild(arr[i]);
}
}
</script>
</body>
</html>
js中的DOM操作(2)的更多相关文章
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- js中的DOM操作(1)
一.操作子节点 childNodes 通过该方式可以获取父节点下的所有子节点,但是由于浏览器的差异,这写节点中可能包含文本节点. <!DOCTYPE html> <html> ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
随机推荐
- C++模板（一）
1. 模板的概念. 我们已经学过重载(Overloading),对重载函数而言,C++的检查机制能通过函数参数的不同及所属类的不同.正确的调用重载函数.例如,为求两个数的最大值,我们定义MAX()函数 ...
- web工程 所需是jar包总结
commons-beanutils-1.8.3.jar : BeanUtils主要提供了对于JavaBean进行各种操作,需要Commons -Collections包和Commons -loggin ...
- tarjan算法+缩点：求强连通分量 POJ 2186
强连通分量:1309. [HAOI2006]受欢迎的牛 ★★ 输入文件:cow.in 输出文件:cow.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述] 每一头牛 ...
- Axure学习笔记1-－原型设计概述
Axure原型 1.原型的出现 -软件功能复杂,用户需求多 -挖掘用户的实际需求 -项目组之间降低沟通成本 2.类型: ［草图原型］描述产品大概需求,记录瞬间灵感 ［低保真原型］展示系统的大致结构和基 ...
- HDU 4865 Peter's Hobby --概率DP
题意:第i天的天气会一定概率地影响第i+1天的天气,也会一定概率地影响这一天的湿度.概率在表中给出.给出n天的湿度,推测概率最大的这n天的天气. 分析:这是引自机器学习中隐马尔科夫模型的入门模型,其实 ...
- Unity物理系统的触发器
如何触发触发器函数? 触发器中相互的,当其中一个是触发器,两个物体进入碰撞,双方的触发器函数都会触发. 两个碰撞盒穿入? 解决办法:给其中一个添加刚体 触发器的物理配置 以上是个人理解,看过API之后 ...
- Linux搭建python环境
环境: CentOS 6.4 前言:CentOS 6.4系统自带的有python2.6.6版本 一.下载文件 python官网:https://www.python.org/downloads/ 版本 ...
- Android安全机制（2） Android Permission权限控制机制
http://blog.csdn.net/vshuang/article/details/44001661 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.概述 Andro ...
- Java基础详解 （一）Java的类成员访问权限修饰词（以及类访问权限）
在一个类的内部,其成员(包括成员变量和成员函数)能否被其他类所访问,取决于该成员的修饰词.Java的类成员访问权限修饰词有四类:private,无(默认情况下),protected和public.其权 ...
- smarty插件开发代替注册插件方法registerPlugin