学习blus老师js(5)--DOM操作应用高级

weixin_33869377

于 2017-10-15 12:04:00 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tenWood/p/7670430.html

本文介绍了HTML表格的便捷操作方法，包括如何通过JavaScript获取表格元素、实现表格排序功能等。此外，还详细讲解了表单事件的应用，如提交(onsubmit)与重置(onreset)事件的触发及处理。

一、表格应用 - 1

获取

tBodies、tHead、tFoot、rows、cells

一个表格可以有很多tbody，所以tBodies是数组；

一个表格只能有一个thead和tfoot，所以tHead和tFoot是一个元素；

表格有自己独有的简便操作；因为js诞生的时候，那会全是表格；所以给表格提供了一些便捷的操作。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oTab=document.getElementById('tab1');
    
    //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
    alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
};
</script>
</head>

<body>
<table id="tab1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>28</td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>25</td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>24</td>
        </tr>
    </tbody>
</table>
</body>
</html>

View Code

search方法的使用：

<script>
var str='abcdef';

alert(str.search('g'));    //找到并且返回字符串出现的位置，如果没找到-1
</script>

2.appendChild的作用：

1.先把元素从原有父级上删掉    
2.添加到新的父级

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function ()
{
    var oUl1=document.getElementById('ul1');
    var oUl2=document.getElementById('ul2');
    var oBtn=document.getElementById('btn1');
    
    oBtn.onclick=function ()
    {
        var oLi=oUl1.children[0];
        
        //oUl1.removeChild(oLi);
        oUl2.appendChild(oLi);    //1.先把元素从原有父级上删掉    2.添加到新的父级
    };
};
</script>
</head>

<body>
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<input id="btn1" type="button" value="移动" />
<ul id="ul2">
</ul>
</body>
</html>

View Code

3.表格排序。这里例子是按照ID排序，排序的思路用到了上面的appendChild：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oTab=document.getElementById('tab1');
    var oBtn=document.getElementById('btn1');
    
    oBtn.onclick=function ()
    {
        var arr=[];
        
        for(var i=0;i<oTab.tBodies[0].rows.length;i++)
        {
            arr[i]=oTab.tBodies[0].rows[i];
        }
        
        arr.sort(function (tr1, tr2){
            var n1=parseInt(tr1.cells[0].innerHTML);
            var n2=parseInt(tr2.cells[0].innerHTML);
            
            return n1-n2;
        });
        
        for(var i=0;i<arr.length;i++)
        {
            oTab.tBodies[0].appendChild(arr[i]);
        }
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>王四</td>
            <td>24</td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>24</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>25</td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>

View Code

二、表单：

表单事件

onsubmit 提交时发生

onreset 重置时发生

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oForm=document.getElementById('form1');
    
    oForm.onsubmit=function ()
    {
        alert('aaa');
        return false;    //阻止默认事件
    };
    oForm.onreset=function ()
    {
        alert('bbbbbb');
    };
};
</script>
</head>

<body>
<form id="form1" action="http://www.zhinengshe.com/">
    用户名：<input type="text" name="user" /><br>
    密码：<input type="password" name="pass" />
    <input type="submit" />
    <input type="reset" />
</form>
</body>
</html>