DOM高级应用

于 2020-07-11 18:00:00 发布
阅读量117 收藏
点赞数
分类专栏： jsxuexi 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47700237/article/details/107231711
版权

表格应用

获取
tHead tFoot 一个表格只有一个 元素
rows 行
cells 单元格

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);


        }

    <!-- 表格 -->
    <table id="tab1" border="1" width="500px">
        <!-- 表头 -->
        <thead>
            <td>ID</td>
            <td>年龄</td>
            <td>年龄</td>
        </thead>
        <!-- 表格 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
            </tr>
        </tbody>
    </table>

隔行变色+移入变色

window.onload=function(){
            var oTab=document.getElementById('tab1');
            var oldColor='';

            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='yellow';
            }

            oTab.tBodies[0].rows[i].onmouseout=function(){
                    this.style.background=oldColor;
            }


                if(i%2){
                    oTab.tBodies[0].rows[i].style.background='';
                }
                else{
                    oTab.tBodies[0].rows[i].style.background='gray';
                }
            }
}
<!-- 表格 -->
    <table id="tab1" border="1" width="500px">
        <!-- 表头 -->
        <thead>
            <td>ID</td>
            <td>年龄</td>
            <td>年龄</td>
        </thead>
        <!-- 表格 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
            </tr>
        </tbody>
    </table>

添加删除

window.onload=function(){
            var oTab=document.getElementById('tab1');
            var oBtn=document.getElementById('btn1');
            var oName=document.getElementById('name');
            var oAge=document.getElementById('age');
            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;  当中间的某个数被删除后在添加顺序会出错
                //修改
                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>'
                oTr.appendChild(oTd);

                oTd.getElementsByTagName('a')[0].onclick=function(){
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                }

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

        }
姓名：<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>Blue</td>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
                <td></td>
            </tr>
        </tbody>
    </table>
搜索
        //搜素
        window.onload=function(){
            var oTab=document.getElementById('tab1');
            var oTxt=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=oTxt.value.toLowerCase();
                    var arr=sTxt.split(' '); //用空格隔开关键字 
                    //oTab.tBodies[0].rows[i].style.background='';  //无论如何背景颜色为空
                    oTab.tBodies[0].rows[i].style.display='none';
                    // toLowerCase() 忽略大小写
                    //if(sTab.toLowerCase()==sTxt.toLowerCase()){
                    //search  找到并且返回字符串出现的位置， 若是没找到返回-1

                    //模糊搜素
                    // if(sTab.search(sTxt)!=-1){
                    //     oTab.tBodies[0].rows[i].style.background='yellow';
                    // }
                    // else{
                    //     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.display='block';
                        }
                    }
                }
            }
        }
 姓名：<input id="name" type="text">
    <input id="btn1"  type="button" value="搜索">

    <!-- 年龄：<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>Blue</td>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
                <td></td>
            </tr>
        </tbody>
    </table>
排序
<script>
        window.onload=function(){

            var oTab=document.getElementById('tab1');
            var oBtn=document.getElementById('btn1');
            
            //appendChild() //1.先把元素从父级上删除  2.添加到新的父级
            
            oBtn.onclick=function(){
                //创建一个数组将ID传入
                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="500px">
            <!-- 表头 -->
            <thead>
                <td>ID</td>
                <td>年龄</td>
                <td>年龄</td>
                <td>操作</td>
            </thead>
            <!-- 表格 -->
            <tbody>
                <tr>
                    <td>3</td>
                    <td>Green</td>
                    <td>21</td>
                    <td></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Red</td>
                    <td>20</td>
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Blue</td>
                    <td>19</td>
                    <td></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Yellow</td>
                    <td>22</td>
                    <td></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>张</td>
                    <td>26</td>
                    <td></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Red</td>
                    <td>20</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
</body>

表单的应用

表单的基础知识

表单：向服务器提交数据 注册登陆
action： 提交到哪

表单事件

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

<script>
        window.onload=function(){
        var oForm=document.getElementById('form1');

        oForm.onsubmit=function(){
            alert('aaa');
        }
        oForm.onreset=function(){
            alert('bbb');
        }
    }
    </script>
</head>
<body>
    <form id="form1" action="数码时钟.html">
        用户名：<input type="text" name="user"><br>
        密码：<input type="password" name="pass">
        <input type="submit" >
        <input type="reset" >
    </form>
</body>
表单内容验证

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

Donner_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM的高级操作——表单的添加／删除／获取
honey_1234567890的博客
02-03 2733
DOM的高级操作——表单的添加／删除／获取 1 表格应用-1 ①获取表单元素 应用1：弹出“张三” 表单 window.onload=function() { var oTab=document.getElementById('tab1'); //弹出“张三” alert(oTab.getElementsByTagName('tbody')[0].getEle
DOM基础应用
qq_56607109的博客
09-02 384
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。
Dom的高级应用
小小鱼儿小小林的博客
09-26 320
1.对表格的操作   HTML   属性或方法 说明 caption 保存着&lt;caption&gt;元素的引用 tBodies 保存着&lt;tbody&gt;元素的HTMLCollection集合 tFoot 保存着对&lt;tfoot&gt;元素的引用 tHead 保存着对&lt;thead&gt;元素的引用 rows 保存着对&lt;tr&gt; 元素的HTMLColl...
JavaScript——DOM的高级应用一
可芭乐的博客
01-22 362
表格应用、表单应用表格应用 获取<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oTab = docume
23、DOM的高级应用-------关于Ul中的 li 的排序
Learning
06-15 2193
1、排序      • 移动Li         • 元素排序：转换——排序——插入         //父节点.appendChild()的实现，会把这个元素节点从ul里面删除，然后在加入。        // 就好比，人上班一样。再加入新的公司，要在当前的公司，离职一样 2、排序的实现代码 DOM中的UL的排序 window.onload = fun
表格练习——DOM关于表格的高级操作、隔行变色、选中变色、添加／删除表格的一行,查找表格中的内容（模糊搜索，多关键字搜索）
weixin_41586886的博客
06-11 579
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;表格-隔行变色，鼠标移入变色&lt;/title&gt; &lt;style&gt;
07-DOM高级应用.pptx
07-06
在“07-DOM高级应用.pptx”这个教程中，主要涵盖了DOM操作、表格应用以及表单应用等多个方面，下面将详细阐述这些知识点。 1. **DOM操作**： - **元素获取**：JavaScript提供了多种方法来获取页面上的元素，如`...
05.DOM高级应用.md
05-22
05.DOM高级应用.md
浅谈jquery高级方法描述与应用
10-21
在jQuery库中，高级方法是提高...通过熟练掌握这些jQuery高级方法，开发者可以编写更高效、更易于维护的代码，提升网页应用的用户体验。理解并适当地运用这些方法，能够简化复杂的DOM操作，提高代码的可读性和复用性。
JavaScript DOM 高级程序设计
08-19
本书注重理论与实践的结合，全面讲述高级的DOM脚本编程。全书分为3个部分：第一部分“深入理解DOM脚本编程”，涉及W3CDOM规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax...
JavaScript.DOM高级程序设计
02-28
本书注重理论与实践的结合，全面讲述高级的DOM 脚本编程。全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以...
股票分时图K线图小程序-微信小程序源码.zip
06-19
股票分时图K线图小程序-微信小程序源码
饿了吗-微信小程序源码.zip
06-19
饿了吗-微信小程序源码
计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉
06-19
计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领域的教程都有哪些？讲一讲如何才能学好计算机视觉； 计算机视觉（CV）领
cryptography-0.6-cp33-none-win32.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
模拟退火算法.docx
06-19
模拟退火算法（Simulated Annealing Algorithm）是一种基于统计力学中退火过程启发而来的全局优化算法，最初由Kirkpatrick等人于1983年提出。它通常用于解决组合优化问题，特别是在搜索解空间中寻找最优解或接近最优解的问题。 原理和基本思想 模拟退火算法的基本思想类似于物理中的退火过程，其中金属经过加热后冷却，使其达到低能量状态。在算法中，我们通过模拟“退火”过程来搜索问题的解空间，寻找全局最优解或者接近最优解的解。 初始解生成：随机生成一个初始解或者根据特定的启发式算法生成初始解。 目标函数：定义一个评估解的函数，通常称为目标函数或成本函数。它用于衡量每个解的质量或者适应度。 接受准则：定义一个接受准则，用来决定是否接受新的解。这通常包括比较当前解和新解的成本以及当前的“温度”。 温度调度：引入一个“温度”参数，它随着算法的进行逐渐降低。温度高时，算法更容易接受成本更高的解，以避免陷入局部最优解；温度低时，算法更趋向于接受成本更低的解，以逐步靠近全局最优解。 搜索过程：从初始解开始，通过随机扰动和接受准则来生成新的解，并根据温度和成本差异决定
cryptography-1.5-cp33-cp33m-win32.whl
最新发布
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
全志t113 mipi10.1寸屏幕翻转90度
06-19
全志t113 mipi10.1寸屏幕翻转90度
步进电机的选型与计算.pdf
06-19
步进电机的选型与计算
web前端javascript高级应用实训
05-30
Web前端JavaScript高级应用实训，主要是针对已经掌握了JavaScript基础语法和DOM操作的学习者，通过实战项目的方式，进一步提升对JavaScript的应用能力和实践经验。在实训中，学习者可以接触到一些高级的JavaScript...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值