由浅入深JavaScript9基础-Dom综合实例1

最新推荐文章于 2022-04-11 19:36:08 发布
置顶 最新推荐文章于 2022-04-11 19:36:08 发布
阅读量504 收藏 2
点赞数 1
分类专栏： web前端 大神前端——JavaScript板块 文章标签： JavaScript DOM 表格 表格搜索 表格反选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangdongxu999/article/details/73301763
版权
JavaScript9基础-Dom综合实例1

在前两节课程中我们讲述了DOM基础以及DOM表格基础。
但是要想学好DOM就必须要大量的练习。这节课我们通过大量例子的
练习来提高对DOM的熟练度。


DOM综合实例-丰富表格

我们先做一个基础表格，该表格只具有添加功能：
eg1:

        <style>
            table, th, td
              {
              border: 1px solid red;
              }
             table{
                 width: 400px;
             }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var otab = document.getElementById('t1');
                var obtn = document.getElementById('btn1');
                var text1 = document.getElementById('text1');
                var text2 = document.getElementById('text2');
                obtn.onclick = function(){
                    var otr = document.createElement('tr');
                    var otd1 = document.createElement('td');
                    var otd2 = document.createElement('td');
                    var otd3 = document.createElement('td');
                    otd1.innerHTML = otab.tBodies[0].rows.length+1;
                    otd2.innerHTML = text1.value;
                    otd3.innerHTML = text2.value;
                    otr.appendChild(otd1);
                    otr.appendChild(otd2);
                    otr.appendChild(otd3);
                    otab.tBodies[0].appendChild(otr);
                }
            }
        </script>
    </head>
    <body>
        &nbsp;&nbsp;&nbsp;&nbsp;
        姓名：<input type="text" id ='text1'/>
        年龄：<input type="text" id ='text2'/>
        <input type="button" value="添加" id='btn1' />
        <table id='t1' >
                <thead>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>js</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jquery</td>
                        <td>20</td>    
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>html</td>
                        <td>22</td>
                    </tr>
                </tbody>
            </table>
    </body>
    
在上述例子上我们新增删除功能，此处删除分为已有表行的删除和新添的表行的删除。

eg2：     

  <style>

            table,
            th,
            td {
                border: 1px solid green;
                text-align: center;
            }
            
            thead{
                background-color: green;
                color: white;
            }
            
            table {
                width: 400px;
                border-collapse: collapse;
                position: absolute;
                left:100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var otab = document.getElementById('t1');
                var obtn = document.getElementById('btn1');
                var text1 = document.getElementById('text1');
                var text2 = document.getElementById('text2');
                var num = otab.tBodies[0].rows.length;//id不可重复利用，注意id和序号。
                obtn.onclick = function(){
                    num++;
                    var otr = document.createElement('tr');
                    var otd1 = document.createElement('td');
                    var otd2 = document.createElement('td');
                    var otd3 = document.createElement('td');
                    var otd4 = document.createElement('td');
                    //otd1.innerHTML = otab.tBodies[0].rows.length+1;
                    otd1.innerHTML = num;
                    otd2.innerHTML = text1.value;
                    otd3.innerHTML = text2.value;
                    otd4.innerHTML = "<a href='javascript:;'>删除</a>";
                    otr.appendChild(otd1);
                    otr.appendChild(otd2);
                    otr.appendChild(otd3);
                    otr.appendChild(otd4);
                    //添加时就把删除功能做好。
                    otd4.getElementsByTagName('a')[0].onclick = function(){
                        otab.tBodies[0].removeChild(this.parentElement.parentElement);
                    }
                    
                    otab.tBodies[0].appendChild(otr);
                }
                //表格删除
                var arr = otab.getElementsByTagName('a');
                for(var i = 0;i<arr.length;i++){
                    arr[i].onclick = function(){
                        otab.tBodies[0].removeChild(this.parentElement.parentElement);
                    }
                }
                
            }
        </script>
    </head>
    <body>
        &nbsp;&nbsp;&nbsp;&nbsp;
        姓名：<input type="text" id ='text1'/>
        年龄：<input type="text" id ='text2'/>
        <input type="button" value="添加" id='btn1' />
        <table id='t1' >
                <thead>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>js</td>
                        <td>18</td>
                        <td><a href='javascipt:;'>删除</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jquery</td>
                        <td>20</td>    
                        <td><a href='javascipt:;'>删除</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>html</td>
                        <td>22</td>
                        <td><a href='javascipt:;'>删除</a></td>
                    </tr>
                </tbody>
            </table>
    </body>

当一个表格添加和删除都具备了，我们还可以补充搜索和排序功能
其中搜索为模糊搜索，排序为按ID排序
eg3：
        <style>
            table,
            th,
            td {
                border: 1px solid green;
                text-align: center;
            }
            
            thead{
                background-color: green;
                color: white;
            }
            
            table {
                width: 400px;
                border-collapse: collapse;
                position: absolute;
                left:100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var otab = document.getElementById('t1');
                var obtn = document.getElementById('btn1');
                var obtn2 = document.getElementById('btn2');
                var obtn3 = document.getElementById('btn3');
                var text1 = document.getElementById('text1');
                var text2 = document.getElementById('text2');
                var num = otab.tBodies[0].rows.length;//id不可重复利用，注意id和序号。
                obtn.onclick = function(){
                    num++;
                    var otr = document.createElement('tr');
                    var otd1 = document.createElement('td');
                    var otd2 = document.createElement('td');
                    var otd3 = document.createElement('td');
                    var otd4 = document.createElement('td');
                    //otd1.innerHTML = otab.tBodies[0].rows.length+1;
                    otd1.innerHTML = num;
                    otd2.innerHTML = text1.value;
                    otd3.innerHTML = text2.value;
                    otd4.innerHTML = "<a href='javascript:;'>删除</a>";
                    otr.appendChild(otd1);
                    otr.appendChild(otd2);
                    otr.appendChild(otd3);
                    otr.appendChild(otd4);
                    //添加时就把删除功能做好。
                    otd4.getElementsByTagName('a')[0].onclick = function(){
                        otab.tBodies[0].removeChild(this.parentElement.parentElement);
                    }
                    
                    otab.tBodies[0].appendChild(otr);
                }
                obtn2.onclick = function(){
                    for(var i = 0;i<otab.tBodies[0].rows.length;i++){
                        var name = otab.tBodies[0].rows[i].cells[1].innerHTML;
                        //if(name==text1.value){ 忽略大小写
                            name = name.toLowerCase();
                        var vue = text1.value.toLowerCase();
                        //if(name.toLowerCase()==text1.value.toLowerCase()){模糊搜索
                        if(name.search(vue)!=-1){
                            otab.tBodies[0].rows[i].style.background = 'red';
                        }else{
                            otab.tBodies[0].rows[i].style.background = '';
                        }
                        
                    }
                }
                
                obtn3.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 num1 = parseInt(tr1.cells[0].innerHTML);
                        var num2 = parseInt(tr2.cells[0].innerHTML);
                        return num1 - num2;
                    });
                    
                    for(var i = 0;i<arr.length;i++){
                        otab.tBodies[0].appendChild(arr[i]);
                    }
                }
                
                
                var arr = otab.getElementsByTagName('a');
                for(var i = 0;i<arr.length;i++){
                    arr[i].onclick = function(){
                        otab.tBodies[0].removeChild(this.parentElement.parentElement);
                    }
                }
                
            }
        </script>
    </head>
    <body>
        &nbsp;&nbsp;&nbsp;&nbsp;
        姓名：<input type="text" id ='text1'/>
        年龄：<input type="text" id ='text2'/>
        <input type="button" value="添加" id='btn1' />
        <input type="button" value="搜索" id='btn2' />
        <input type="button" value='排序' id='btn3' />
        <table id='t1' >
                <thead>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </thead>
                <tbody>
                    <tr>
                        <td>14</td>
                        <td>js</td>
                        <td>18</td>
                        <td><a href='javascipt:;'>删除</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jquery</td>
                        <td>20</td>    
                        <td><a href='javascipt:;'>删除</a></td>
                    </tr>
                    <tr>
                        <td>31</td>
                        <td>html</td>
                        <td>22</td>
                        <td><a href='javascipt:;'>删除</a></td>
                    </tr>
                </tbody>
            </table>
    </body>
    
到了版本三后，我们的表格已经有了添加，删除，排序，搜索功能，我们还需要补充全选和反选功能
这样最终版本的丰富表格就完成了。

eg4：

       <style>

            table,
            th,
            td {
                border: 1px solid green;
                text-align: center;
            }
            
            thead{
                background-color: green;
                color: white;
            }
            
            table {
                width: 400px;
                border-collapse: collapse;
                position: absolute;
                left:100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var otab = document.getElementById('t1');
                var obtn = document.getElementById('btn1');
                var obtn2 = document.getElementById('btn2');
                var obtn3 = document.getElementById('btn3');
                var obtn4 = document.getElementById('btn4');
                var text1 = document.getElementById('text1');
                var text2 = document.getElementById('text2');
                var obox = document.getElementsByName('allchoose')[0];
                var num = otab.tBodies[0].rows.length; //id不可重复利用，注意id和序号。

                obox.onclick = function() { //全选
                    //先判断，表头的是什么状态，根据状态全选和全选。
                    var arr = document.getElementsByName('choose');
                    if(obox.checked == true) {
                        for(var i = 0; i < arr.length; i++) {
                            arr[i].checked = true;
                        }
                    } else {
                        for(var i = 0; i < arr.length; i++) {
                            arr[i].checked = false;
                        }
                    }
                }

                obtn.onclick = function() { //添加
                    num++;
                    var otr = document.createElement('tr');
                    var otd0 = document.createElement('td');
                    var otd1 = document.createElement('td');
                    var otd2 = document.createElement('td');
                    var otd3 = document.createElement('td');
                    var otd4 = document.createElement('td');

                    //otd1.innerHTML = otab.tBodies[0].rows.length+1;
                    otd0.innerHTML = "<input type='checkbox' name='choose'/>";
                    otd1.innerHTML = num;
                    otd2.innerHTML = text1.value;
                    otd3.innerHTML = text2.value;
                    otd4.innerHTML = "<a href='javascript:;'>删除</a>";
                    otr.appendChild(otd0);
                    otr.appendChild(otd1);
                    otr.appendChild(otd2);
                    otr.appendChild(otd3);
                    otr.appendChild(otd4);
                    //添加时就把删除功能做好。
                    otd4.getElementsByTagName('a')[0].onclick = function() {
                        otab.tBodies[0].removeChild(this.parentElement.parentElement);
                    }

                    otab.tBodies[0].appendChild(otr);
                }

                obtn2.onclick = function() { //搜索
                    for(var i = 0; i < otab.tBodies[0].rows.length; i++) {
                        var name = otab.tBodies[0].rows[i].cells[2].innerHTML;
                        //if(name==text1.value){ 忽略大小写
                        name = name.toLowerCase();
                        var vue = text1.value.toLowerCase();
                        //if(name.toLowerCase()==text1.value.toLowerCase()){模糊搜索
                        if(name.search(vue) != -1) {
                            otab.tBodies[0].rows[i].style.background = 'red';
                        } else {
                            otab.tBodies[0].rows[i].style.background = '';
                        }

                    }
                }

                obtn3.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 num1 = parseInt(tr1.cells[1].innerHTML);
                        var num2 = parseInt(tr2.cells[1].innerHTML);
                        return num1 - num2;
                    });

                    for(var i = 0; i < arr.length; i++) {
                        otab.tBodies[0].appendChild(arr[i]);
                    }
                }

                obtn4.onclick = function() { //反选
                    var arr = document.getElementsByName('choose');
                    for(var i = 0; i < arr.length; i++) {
                        if(arr[i].checked == true) {
                            arr[i].checked = false;
                        } else {
                            arr[i].checked = true;
                        }
                    }

                }

                var arr = otab.getElementsByTagName('a');
                for(var i = 0; i < arr.length; i++) {
                    arr[i].onclick = function() { //删除
                        otab.tBodies[0].removeChild(this.parentElement.parentElement);
                    }
                }

            }
        </script>
    </head>

    <body>
        &nbsp;&nbsp;&nbsp;&nbsp; 姓名：
        <input type="text" id='text1' /> 年龄：
        <input type="text" id='text2' />
        <input type="button" value="添加" id='btn1' />
        <input type="button" value="搜索" id='btn2' />
        <input type="button" value='排序' id='btn3' />
        <input type="button" value='反选' id='btn4' />
        <table id='t1'>
            <thead>
                <td><input type="checkbox" name='allchoose' /></td>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name='choose' /></td>
                    <td>12</td>
                    <td>js</td>
                    <td>18</td>
                    <td>
                        <a href='javascipt:;'>删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name='choose' /></td>
                    <td>2</td>
                    <td>Jquery</td>
                    <td>20</td>
                    <td>
                        <a href='javascipt:;'>删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name='choose' /></td>
                    <td>7</td>
                    <td>html</td>
                    <td>22</td>
                    <td>
                        <a href='javascipt:;'>删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

    </body>





总结JavaScript DOM操作需要大量的练习，大量练习提高熟练度。


说在最后的话：

本博会开一个JS专栏:《大神前端：JavaScript板块》长期更新，由浅入深带大家系统的学习JavaScript，
做出多彩的JS特效。
如果对你有用就关注一下专栏吧，我会不断的更新，后期还有其他版块。
http://blog.csdn.net/column/details/15918.html

想深入，系统全面的学习JS，博友们可以在CSDN搜索我的课程《多彩JavaScript》@_@。
http://edu.csdn.net/course/detail/5619

限于文章篇幅原因，这里仅仅介绍冰山一角。由于笔者的水平有限，编写时间也很仓促，
文中难免会出现一些错误或者不准确的地方，不妥之处恳请读者批评指正



——总结——

限于文章篇幅原因，这里仅仅介绍冰山一角。由于笔者的水平有限，编写时间也很仓促，
文中难免会出现一些错误或者不准确的地方，不妥之处恳请读者批评指正

尼古拉斯_张三
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS中DOM重点基础知识实验（全）
lvanboy的博客
03-14 1439
文档：一个页面就是一个文档。 元素：页面中所有的标签都是元素，也可以叫对象。 节点：页面中所有的内容都是节点，标签，属性，文本。 在JS中操作dom，设置css样式时，样式的名称如background-color，在js中一律用驼峰写法，backgroundColor 通过JS设置元素行内样式，操作style属性即可 通过JS设置元素的类样式，不用c...
javascript-tutorial:JavaScript教程https
03-31
本教程全面介绍JavaScript核心语法，覆盖了ES5和DOM规范的所有内容。内容上从最简单的讲起，循序渐进，由浅入深，力求清晰易懂。所有章节都带有大量的代码实例，可以理解和模仿，可以用到实际项目中，即学即用。本...
DOM操作综合实例
weixin_33696822的博客
10-19 169
- 综合实例(点击注册，下面表格增加一行)window.onload = function(){ document.getElementById("addUser").onclick = function(){ var nameValue = document.getElementById("name").value; var emailValue = document....
DOM总结（三）及综合案例
03-17 221
DOM总结（三）及综合案例 1，DOM属性-----replaceChild()     replaceChild()---替换节点: 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild);     返回值是一个指向已被替换的那个子节点的引用指针。     如果被插入的子节...
js实验-DOM操作
fireflylane的博客
11-25 682
HTML &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel="stylesheet" href="./2.css"&gt; &lt;/head&gt;
JavaScript DOM 编程艺术一书综合示例
watermelonbig的专栏
12-11 3651
在HTML页面结构中，常用到的几个区域是头部区域，使用header元素；导航区域，使用nav 元素；在内容区域可以使用article元素来展示每一页的内容。这些标签元素都是HTML5标签。在使用HTML5元素时，建议在文档的元素中包含Modernizer库，用来对浏览器是否支持H5标签进行检验。取得当前页面的URL，可以使用window.location
JavaScript经典案例集合
01-02
JavaScript经典案例集合是送给入门者最好的礼物！是本人精心总结的案例！可以让你迅速上手，物有所值。内容囊括的js的各个方面，而且由浅入深，条例极为清晰，注释丰富。内容：js基础语法；Dom操作；Div操作；正则...
JavaScript 中文教程 完整版PDF
最新发布
05-04
《JavaScript 中文教程》主要介绍 JavaScript 核心语法和浏览器网页开发的基本知识，不涉及 Node。全书可以分成以 下四大部分。 1、基本语法 2、标准库 3、浏览器API 4、DOM 本教程全面介绍 JavaScript 核心...
javascript实例应用
02-22
1. **基础语法**：JavaScript的基础包括变量、数据类型（如字符串、数字、布尔值、null和undefined）、操作符、流程控制（如条件语句if/else、循环for和while）、函数以及数组等。理解这些基本元素是学习JavaScript...
JavaScript教程
05-14
这份教程旨在帮助读者全面理解和掌握JavaScript这门强大的脚本语言，从而在Web开发领域建立坚实的基础。 一、JavaScript概述 JavaScript，简称JS，是由Netscape公司的Brendan Eich在1995年发明的一种解释型、面向...
Javascript 之 DOM案例（1）
Ivy_Ch的博客
08-27 390
1.点击按钮弹出对话框 <input type="button" value="弹出来" onclick="alert('我是弹框')"> 2.点击按钮修改超链接的地址和热点文字 // 根据id获取按钮，注册点击事件，增加事件处理函数 document.getElementById("bth").onclick()=function () { // 根据id...
js dom 操作实例图解
bcbobo21cn的专栏
07-02 1450
以下操作的是www.ibm.com； 下面是在js调试控制台中操作； 根据id和name获取元素对象；获取对象后获取值用getAttribute； 遍历一个元素的属性集合，输出属性的名字和值； 遍历一个元素的子节点，输出子节点的id，name; 遍历一个元素的子节点，输出其id，和子节点类型；子节点类型没获取到；
DOM综合案例-飞翔的小鸟
张培跃的个人博客
04-11 3602
通过jsDOM完成的一个小游戏
表格的删除与添加
dianmei3204的博客
05-25 89
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
javascript DOM编程艺术学习笔记（8）网站项目综合运用实例：
彬go的专栏
04-18 1456
在学习完这本后，在课后也提供了一个网站页面的综合实例开发
黑马程序员__重点dom实例！
fengzhihen12345的专栏
09-01 3141
---------------------- android培训、java培训、期待与您交流！ ----------------------   开篇跟大家推荐一套我自学用的视频，通过自学就能5K就业的绝好视频！ 全套学习路线及视频 Java全套顶级视频 DotNet全套视频 PHP全套视频     级联菜单： 级联菜单 function sel
JavaScript DOM编程艺术——综合案例
liaoai的博客
10-18 1937
文章目录HTML代码template.htmlindex.htmlabout.htmlphotos.htmllive.htmlcontact.htmlCSS代码layout.csscolor.csstypography.cssbasic.cssJS代码 HTML代码 template.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
A DOM高级 04 表格添加行
小漠007的专栏
05-27 1239
ID         姓名         操作                         1         大卡                         2         leo                         3         莫莫                         4  
JS访问表格内容，计时器等示例代码
做得最大的项目，就是人生
08-25 859
还是把总结的东西放到网上好哇，记不清楚直接拷贝来用哇         function OpenWin() {             window.open("http://www.g.cn");         }         function OpenWin
"宏病毒研究与实例分析01——基础篇1
本系列文章将由浅入深对宏病毒进行全面的剖析。本系列文章共有三个部分，第一部分是入门篇，介绍的是基础理论知识，对宏病毒进行实例分析，介绍了宏病毒分析的技巧以及一些防治手段；第二部分是深入篇，我们会研究更...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值