您的位置：首页 > Web前端 > JavaScript

js中的DOM操作(2)

2016-05-23 11:37 399 查看

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航