智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级

最新推荐文章于 2021-05-04 23:32:02 发布
最新推荐文章于 2021-05-04 23:32:02 发布
阅读量1.2k 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/namei33/article/details/46338711
版权

表格应用

1. 获取

tBodies、tHead、tFoot、rows、cells
注意： 一个表格可以有多个tbody （所以tBodies是复数，是一个数组），但是只能有一个thead，一个tfoot （tHead和tFoot不是数组，只是一个元素）。
表格.tBodies[0] == 表格.getElementsByTagName(“tbody”)[0] 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");

    //alert(oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[2].getElementsByTagName("td")[1].innerHTML);

    alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);
};
</script>
<body>
<table id="tab1" border="1" width="500px">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Lisa</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Blue</td>
            <td>27</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>4</td>
            <td>李四</td>
            <td>28</td>
        </tr>
        <tr>
            <td>5</td>
            <td>王五</td>
            <td>24</td>
        </tr>
    </tbody>
</table>
</body>
</html>

2. 隔行变色

简单的隔行变色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");

    //for(var i=0; i<oTab.rows.length; i++) 如果不指明tBodies, 那么会将tHead和tFoot也算进去
    for(var i=0; i<oTab.tBodies[0].rows.length; i++)
    {
        if(i%2)
        {
            oTab.tBodies[0].rows[i].style.background = "#ccc";
        }
        else
        {
            oTab.tBodies[0].rows[i].style.background = "";
        }
    }
};
</script>
<body>
<table id="tab1" border="1" width="500px">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Lisa</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Blue</td>
            <td>27</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>4</td>
            <td>李四</td>
            <td>28</td>
        </tr>
        <tr>
            <td>5</td>
            <td>王五</td>
            <td>24</td>
        </tr>
    </tbody>
</table>
</body>
</html>

鼠标移入高亮:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");

    var  oldColor = "";

    //for(var i=0; i<oTab.rows.length; i++) 如果不指明tBodies, 那么会将tHead和tFoot也算进去
    for(var i=0; i<oTab.tBodies[0].rows.length; i++)
    {
        oTab.tBodies[0].rows[i].onmouseover = function()
        {
            oldColor = this.style.background; // 保存原来的背景颜色

            this.style.background = "green";
        };

        oTab.tBodies[0].rows[i].onmouseout= function()
        {
            //this.style.background = ""; //鼠标移出后会将原来的背景色去掉

            this.style.background = oldColor;
        };


        if(i%2)
        {
            oTab.tBodies[0].rows[i].style.background = "#ccc";
        }
        else
        {
            oTab.tBodies[0].rows[i].style.background = "";
        }
    }
};
</script>
<body>
<table id="tab1" border="1" width="500px">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Lisa</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Blue</td>
            <td>27</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>4</td>
            <td>李四</td>
            <td>28</td>
        </tr>
        <tr>
            <td>5</td>
            <td>王五</td>
            <td>24</td>
        </tr>
    </tbody>
</table>
</body>
</html>

3. 添加、删除一行

DOM方法的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");
    var oName = document.getElementById("name");
    var oAge = document.getElementById("age");
    var oBtn = document.getElementById("btn1");

    var id = oTab.tBodies[0].rows.length + 1;

    oBtn.onclick = function()
    {
        var oTr = document.createElement("tr");

        var oTd = document.createElement("td");
        //oTd.innerHTML = oTab.tBodies[0].rows.length + 1; //出现问题：如果中间删除一行后，新添加的id有重复
        oTd.innerHTML = id++;   
        oTr.appendChild(oTd);

        var oTd = document.createElement("td");
        oTd.innerHTML = oName.value;
        oTr.appendChild(oTd);

        var oTd = document.createElement("td");
        oTd.innerHTML = oAge.value;
        oTr.appendChild(oTd);

        var oTd = document.createElement("td");
        //oTd.innerHTML = "<a href=javascript:;>删除</a>";
        oTd.innerHTML = '<a href="javascript:;">删除</a>';
        oTr.appendChild(oTd);

        oTd.getElementsByTagName("a")[0].onclick = function()
        {
            //oTab.removeChild(this.parentNode.parentNode); //出错，必须写上tBodies
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
        };

        //oTab.appendChild(oTr);
        oTab.tBodies[0].appendChild(oTr);
    };

};
</script>
<body>
姓名：<input id="name" type="text" />
年龄：<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500px">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Lisa</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>李四</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>王五</td>
            <td>24</td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>

4. 搜索

版本1：基础版本——字符串比较
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");
    var oName = document.getElementById("name");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function()
    {
        for(var i=0; i<oTab.tBodies[0].rows.length; i++)
        {
            if(oTab.tBodies[0].rows[i].cells[1].innerHTML == oName.value)
            {
                oTab.tBodies[0].rows[i].style.background = "yellow";
            }
            else
            {
                oTab.tBodies[0].rows[i].style.background = "";
            }
        }
    };

};
</script>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500px">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Lisa</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>张三</td>
            <td>23</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>李四</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>王五</td>
            <td>24</td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>
版本2：忽略大小写——大小写转换
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");
    var oName = document.getElementById("name");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function()
    {
        for(var i=0; i<oTab.tBodies[0].rows.length; i++)
        {
            var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML;
            var sTxt = oName.value;

            if(sTab.toLowerCase() == sTxt.toLowerCase())
            {
                oTab.tBodies[0].rows[i].style.background = "yellow";
            }
            else
            {
                oTab.tBodies[0].rows[i].style.background = "";
            }
        }
    };

};
</script>
版本3：模糊搜索——search的使用

str1.search(str2)： 若str1中包含str2， 返回出现的位置（从0开始），否则返回-1。

<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");
    var oName = document.getElementById("name");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function()
    {
        for(var i=0; i<oTab.tBodies[0].rows.length; i++)
        {
            var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var sTxt = oName.value.toLowerCase();

            if(sTab.search(sTxt) != -1)
            {
                oTab.tBodies[0].rows[i].style.background = "yellow";
            }
            else
            {
                oTab.tBodies[0].rows[i].style.background = "";
            }
        }
    };

};
</script>
版本4：多关键词——split
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");
    var oName = document.getElementById("name");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function()
    {
        for(var i=0; i<oTab.tBodies[0].rows.length; i++)
        {
            var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var sTxt = oName.value.toLowerCase();
            var arr = sTxt.split(' ');

            oTab.tBodies[0].rows[i].style.background = "";

            for(var j=0; j<arr.length; j++)
            {
                if(sTab.search(arr[j]) != -1)
                {
                    oTab.tBodies[0].rows[i].style.background = "yellow";
                }
            }

        /*  不能这样写，因为搜索下一个关键字时会把之前高亮的清除！！！
            for(var j=0; j<arr.length; j++)
            {
                if(sTab.search(arr[j]) != -1)
                {
                    oTab.tBodies[0].rows[i].style.background = "yellow";
                }
                else
                {
                    oTab.tBodies[0].rows[i].style.background = "";
                }
            }
        */  
        }
    };

};
</script>
筛选出符合条件的
<script>
window.onload = function()
{
    var oTab = document.getElementById("tab1");
    var oName = document.getElementById("name");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function()
    {
        for(var i=0; i<oTab.tBodies[0].rows.length; i++)
        {
            var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var sTxt = oName.value.toLowerCase();
            var arr = sTxt.split(' ');

            oTab.tBodies[0].rows[i].style.display = "none";

            for(var j=0; j<arr.length; j++)
            {
                if(sTab.search(arr[j]) != -1)
                {
                    oTab.tBodies[0].rows[i].style.display = "block";
                }
            }

        }
    };

};
</script>

5. 排序

移动Li

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<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]; // 注意： 是children，而不是child

        //oUl1.removeChild(oLi); //可以不用， 因为appendChild：先把元素从原来的父级上删除，然后再添加到新的父级。
        oUl2.appendChild(oLi);
    };

};
</script>
<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>

或者：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oUl1 = document.getElementById("ul1");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function()
    {
        var oLi = oUl1.children[0]; 

        oUl1.appendChild(oLi);
    };

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

元素排序：转换——排序——插入

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oUl1 = document.getElementById("ul1");
    var oBtn = document.getElementById("btn1");

    oBtn.onclick = function()
    {
        var aLi = oUl1.getElementsByTagName("li");
        // aLi.sort(); // 错误！因为aLi并不是Array,而是一个元素集合。它没有sort方法。

        // convert aLi to an array:
        var arr = [];
        for(var i=0; i<aLi.length; i++)
        {
            arr[i] = aLi[i];
        }

        arr.sort(function (li1, li2) {
            var num1 = parseInt(li1.innerHTML);
            var num2 = parseInt(li2.innerHTML);

            return num1-num2;
        });

        for(var j=0; j<arr.length; j++)
        {
            alert("该把"+arr[j].innerHTML+"插入到最后");
            oUl1.appendChild(arr[j]);
        }
    };

};
</script>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
    <li>34</li>
    <li>25</li>
    <li>9</li>
    <li>88</li>
    <li>54</li>
</ul>
</body>
</html>

表单应用

1. 表单基础知识

什么是表单
向服务器提交数据，比如：用户注册
action 提交到哪里

2. 表单事件

onsubmit 提交时发生
onreset 重置时发生

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
    var oForm = document.getElementById("form1");

    oForm.onsubmit = function() 
    {
        alert("aaa");
    };

    oForm.onreset = function() 
    {
        alert("bbb");
    };
};
</script>
<body>
<form id="form1" action="http://www.zhinengshe.com/">
    用户名：<input id="name" type="text" /> <br />
    密码：<input type="password" name="user" />
    <input type="submit" />
    <input type="reset" />
</form>
</body>
</html>

3. 表单内容验证

阻止用户输入非法字符 阻止事件
输入时、失去焦点时验证 onkeyup、onblur
提交时检查 onsubmit
*后台数据检查

namei33
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table 的tBodies
ISaiSai的专栏
10-02 8420
a.tBodies[0].rows[0].cells[0] 一个table 可以有多个 tbody
关于table的tBodies中的某一句
我有个橘子
01-07 876
table
JavaScript入门（二）
jiangtea的博客
07-25 343
1、标签<thead>和<tbody>的使用，实现不同行不同颜色：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var tb
js复习笔记(忘记tbodies)
jingtian678的博客
05-17 1442
隔行变色 *{margin: 0;padding: 0;} div { width: 387px; margin: 20px auto; } table { text-align: center; margin: 0 auto; } th { width: 100px; line-height: 20px; height: 20px; } td { wi
JavaScript学习笔记之DOM基础操作实例小结
12-08
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下： 一、子节点 1、元素节点、文本节点 实例01 html <body> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4...
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
javascript 学习笔记（一）DOM基本操作
01-21
html部分代码： 当点击show按钮时，触发showValue函数，将input value的值动态添加到id=”text”的元素节点中！ 代码如下: <p> <...</span> </p> ”text”></p> javascript 部分代码： 页面加载时，使inpu
比较详细的javascript DOM 学习笔记第1/2页
12-08
一、DOM基础1.节点(node)层次Document－－最顶层的节点，所有的其他节点都是附属于它的。DocumentType－－DTD引用（使用<!DOCTYPE>语法）的对象表现形式，它不能包含子节点。DocumentFragment－－可以像Document...
操作表格元素，删除、增加表格中的元素
梁什么鸭“的博客
05-04 290
1、隔行显色 for循环遍历tbody里的行元素个数，设置单行和双行的颜色，只要用 if 语句判断一下i的奇偶性 for(var i=0; i<oTable.tBodies[0].rows.length; i++) { if(i%2 === 0) { oTable.tBodies[0].rows[i].style.background = 'pink'; } else { oTable.tBodies[0].rows[i].style.b.
智能社JavaScript系列视频案例笔记
11-05
案例1. 按钮 代码： <body> <input type="button" value="按钮" /> </body> 案例2.鼠标移入显示移出隐藏 代码： <style> #div1 {width:200px; height:100px; background:#CCC; border:1px solid #999; display:none;} </style> </head> <body> <input type="checkbox" /> <div id="div1"> 为了您的信息安全。。。。 </div> </body>
智能社JavaScript 笔记1：基础入门篇（1）
开发学习者
07-22 324
JavaScript是什么 网页特效原理 淘宝、新浪、百度 JavaScript就是修改样式 编写JS的流程 布局： HTML + CSS 属性： 确定要修改哪些属性 事件： 确定用户做哪些操作（产品设计） 编写JS：在事件中，用JS来修改页面元素的样式 第一个JS特效——鼠标提示框 分析效果实现原理 样式： Div的display 事件： onmouseover、on...
DOM的高级操作——表单的添加／删除／获取
honey_1234567890的博客
02-03 2729
DOM的高级操作——表单的添加／删除／获取 1 表格应用-1 ①获取表单元素 应用1：弹出“张三” 表单 window.onload=function() { var oTab=document.getElementById('tab1'); //弹出“张三” alert(oTab.getElementsByTagName('tbody')[0].getEle
智能社JS学习笔记（七）
mirror29的博客
06-21 274
面向对象基础——定义：在不了解原理的情况下，会使用功能——对象：不了解内部的结构，知道表面的各种操作（按钮），如date，array【面向对象是一种通用思想】——面向对象编程（OOP）特点        抽象：把最主要的特征，跟问题相关的特征抽出来（抓住核心问题）；        封装：不考虑内部的实现，只考虑功能的使用；        继承：从父类上继承出一些方法，属性；子类又有一些自己的特性（...
智能社JS学习笔记（一）
mirror29的博客
05-21 1181
转眼工作即将半年，这段时间自学了UI，html和css方面能比较熟练的掌握了，写过两套小程序的模板但只知其然不知其所以然（还是因为自己js基础知识掌握的不够啊）用bootstrap之类的框架能写一些常见的JS效果，但自己基本没怎么动手写过JS。感觉前面的基础基本已经稳固，所以给自己制定了近期的学习计划，向我目标中的全栈进阶哈哈，昨天刚学习完了less，算是有了一点当初学习js的感觉。打算近期看完智...
智能社JavaScript学习笔记——JS运动基础
namei33的博客
06-09 2005
1. 运动基础让Div运动起来<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 200px; height: 200px; background: red; position: absolute;
智能社JavaScript学习笔记——11 - DOM基础
namei33的博客
05-27 1276
DOM （Document Object Model, 文档对象模型）标签——CSS 元素——JS 节点——DOM元素属性操作方式： 1. oDiv.style.display = ‘block’; 2. oDiv.style[‘display’] = ‘block’; 3. DOM方式DOM方式操作元素属性： 1. 获取：getAttribute(名称)
@vue/runtime-dom missing for Vue 2 Vue 2 does not have JSX types definitions, so template type checking will not work correctly. You can resolve this problem by installing @vue/runtime-dom and adding it to your project's devDependencies. vue: d:\JavaAll\WLMP_CZ\Code\WLMPWebPlatform\node_modules\vue\package.json
最新发布
05-30
这似乎不是一个问题，而是一个警告信息，它告诉你在使用 Vue 2 时，如果想要进行模板类型检查，需要安装 @vue/runtime-dom 并将其添加到项目的 devDependencies 中。你可以执行以下命令来安装它： ``` npm install ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值