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

最新推荐文章于 2024-10-07 19:31:14 发布
置顶 最新推荐文章于 2024-10-07 19:31:14 发布
阅读量570 收藏 2
点赞数 1
分类专栏： web前端 大神前端——JavaScript板块 文章标签： JavaScript DOM 表格 表格搜索 表格反选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangdongxu999/article/details/73301763
版权
本文通过四个逐步进化的实例，展示了如何使用JavaScript DOM操作实现表格的添加、删除、搜索、排序及选择功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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.youkuaiyun.com/column/details/15918.html

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

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



——总结——

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

SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
DOM总结（三）及综合案例
03-17 285
DOM总结（三）及综合案例 1，DOM属性-----replaceChild()     replaceChild()---替换节点: 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild);     返回值是一个指向已被替换的那个子节点的引用指针。     如果被插入的子节...
DOM操作综合实例
weixin_33696822的博客
10-19 226
- 综合实例(点击注册，下面表格增加一行)window.onload = function(){ document.getElementById("addUser").onclick = function(){ var nameValue = document.getElementById("name").value; var emailValue = document....
DOM综合案例-飞翔的小鸟
张培跃的个人博客
04-11 3647
通过jsDOM完成的一个小游戏
Javascript 之 DOM案例（1）
Ivy_Ch的博客
08-27 509
1.点击按钮弹出对话框 <input type="button" value="弹出来" onclick="alert('我是弹框')"> 2.点击按钮修改超链接的地址和热点文字 // 根据id获取按钮，注册点击事件，增加事件处理函数 document.getElementById("bth").onclick()=function () { // 根据id...
javascript DOM编程艺术学习笔记（8）网站项目综合运用实例：
彬go的专栏
04-18 1510
在学习完这本后，在课后也提供了一个网站页面的综合实例开发
网页开发必学：JavaScript实例教程详解
标题“JavaScript实例教程”指的是以实例为基础的教学材料，旨在教授JavaScript编程语言。JavaScript是一种在浏览器端执行的脚本语言，广泛应用于网页开发中，用以增强网页的动态效果、用户交互等功能。实例教程通常...
深入掌握JavaScript的50个编程实例解析
通过分析上述文件信息，我们可以了解到这是一套以实例为基础的JavaScript教学材料，旨在通过具体的编码实例和实践操作，帮助学习者深入理解和掌握JavaScript的编程知识和技能。课程设计可能非常注重实践和动手能力的...
全面掌握JavaScript和jquery实例教程
描述部分强调了该教程或书籍的完整性，即包含了书籍中所有章节的实例，意味着读者可以获得系统的、由浅入深的JavaScript和jQuery知识学习。这通常包括基础语法、DOM操作、事件处理、动画效果、AJAX交互以及前端页面...
轻松掌握JavaScript：实例教学指南
综上所述，JavaScript教学通常涵盖从基础语法到高级特性的全面内容，同时也注重实例演示和实践操作，让学习者能够在实践中学习和掌握JavaScript编程。通过系统学习，可以培养出能够独立开发高质量Web应用的前端...
js dom 操作实例图解
bcbobo21cn的专栏
07-02 1499
以下操作的是www.ibm.com； 下面是在js调试控制台中操作； 根据id和name获取元素对象；获取对象后获取值用getAttribute； 遍历一个元素的属性集合，输出属性的名字和值； 遍历一个元素的子节点，输出子节点的id，name; 遍历一个元素的子节点，输出其id，和子节点类型；子节点类型没获取到；
黑马程序员__重点dom实例！
fengzhihen12345的专栏
09-01 3202
---------------------- android培训、java培训、期待与您交流！ ----------------------   开篇跟大家推荐一套我自学用的视频，通过自学就能5K就业的绝好视频！ 全套学习路线及视频 Java全套顶级视频 DotNet全套视频 PHP全套视频     级联菜单： 级联菜单 function sel
常见js dom等原生示例
至尊宝
05-03 1932
js常见dom案例，不难，仅仅记录一下 全选，不选，反选 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var btn1=document.getEleme
js实验-DOM操作
fireflylane的博客
11-25 725
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的事件（3个案例+代码+效果图）
最新发布
2301_76862031的博客
10-07 1204
js操作dom的的事件,焦点事件，鼠标事件，键盘事件 登录表单验证,单击使小球跳跃，左右键控制小球移动
JS中DOM重点基础知识实验（全）
lvanboy的博客
03-14 1554
文档：一个页面就是一个文档。 元素：页面中所有的标签都是元素，也可以叫对象。 节点：页面中所有的内容都是节点，标签，属性，文本。 在JS中操作dom，设置css样式时，样式的名称如background-color，在js中一律用驼峰写法，backgroundColor 通过JS设置元素行内样式，操作style属性即可 通过JS设置元素的类样式，不用c...
JavaScript DOM 编程艺术一书综合示例
watermelonbig的专栏
12-11 3778
在HTML页面结构中，常用到的几个区域是头部区域，使用header元素；导航区域，使用nav 元素；在内容区域可以使用article元素来展示每一页的内容。这些标签元素都是HTML5标签。在使用HTML5元素时，建议在文档的元素中包含Modernizer库，用来对浏览器是否支持H5标签进行检验。取得当前页面的URL，可以使用window.location
JavaScript DOM编程艺术——综合案例
liaoai的博客
10-18 2065
文章目录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>
JS访问表格内容，计时器等示例代码
做得最大的项目，就是人生
08-25 924
还是把总结的东西放到网上好哇，记不清楚直接拷贝来用哇         function OpenWin() {             window.open("http://www.g.cn");         }         function OpenWin
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值