原生JS例子

利用原生JS做一个班级统计表

实现功能:

1.点击添加建立一行表格

2.点击删除,删除一行表格

3.点击每个单元格可以输入内容,焦点移走的时候保存内容

思路分析:

1.建立简单的HTML的表格

2.通过JS向表格中添加元素

  (1):添加tr td button 等元素

   (2):添加删除按钮

3.通过DOM操作向表格中添加内容

  (1):向每个td中添加点击事件

   (2):向每个td中添加标记

   (3):寻找标记,并在标记的td中添加 input标签

   (4):焦点移除,删除标记,并且重新给每个td加上点击事件

   (5):获取输入的值,并赋值到变量

   (6):将获取的变量输入到td中保存

   (7):向删除按钮添加删除事件,删除自身tr

代码:

//建立简单的HTML表格

<body>
    <center>
        <table id="tab">
            <tr>
                <th width="25%">年级</th>
                <th width="25%">性别</th>
                <th width="25%">姓名</th>
                <th width="25%">操作</th>
            </tr>
        </table>
        <button id="but">添加</button>
    </center>
</body>

//利用JS向其中添加内容

//定义全局变量

var tabdom="";
var butdom="";
var n=0;
var trdom="";
var tddom="";
var czdom="";
var tdlength="";
var dd="";
var int="";

//初始化
window.onload = function(){
    tabdom=document.getElementById("tab");
    butdom=document.getElementById("but");
    butdom.addEventListener("click",touch);
    tabdom.setAttribute("width","50%");
    tabdom.setAttribute("border","1");
    dd=document.getElementsByTagName("td");
}

//定义添加一行的方法
function touch(){
    n++;    //设定一个标记,用来区分每个td
    trdom=document.createElement("tr");   //利用DOM添加一个TR
    trdom.style.height="30px";                 
    tdlength=document.getElementsByTagName("th");     //获取TH标签用来确定TD标签循环的次数
    for(var i=0;i<tdlength.length;i++){                   //循环添加TD和删除按钮
        tddom=document.createElement("td");       //利用DOM添加TD
        if(i == tdlength.length-1){                            //向最后一个TD中添加删除按钮
            czdom=document.createElement("button");        //利用DOM添加一个按钮
            czdom.innerHTML="删除";                       //向按钮中添加提示文字
            czdom.addEventListener("click",del);       //添加按钮删除事件
            czdom.setAttribute("flage",n);                 //向按钮添加标记,区分每个按钮
            tddom.appendChild(czdom);                  //将按钮添加到TD
            tddom.style.textAlign="center";              //设置按钮的属性,用来区分又按钮的单元格和没有按钮的单元格
        }
        trdom.appendChild(tddom);                      //循环箱TR中添加TD
        trdom.setAttribute("flage",n);                    //循环向TR中添加标记
    }
    tabdom.appendChild(trdom);                       //循环向表格中添加TR
    
    //给每个TD添加点击事件,用来添加input

dd=document.getElementsByTagName("td");
    
    for(var f=0;f<dd.length;f++){
        //alert(dd[f]);
        dd[f].addEventListener("click",add);
    }
}
function add(){                                                 //添加input事件
    var td_a1="";
    var td_info=this;                                         //保证this是事件本身不会变化
    if(td_info.style.textAlign != ""){                  //排除向按钮中添加input标签
        return;
    }
    td_a1=td_info.innerHTML;                          //获取TD中的内容
    int=document.createElement("input");        //添加input标签
    int.setAttribute("value",td_a1);                  //向input中添加内容
    int.addEventListener("blur",xiaoshi);          //设置焦点移走的事件
    int.style.border="none";                             //删除边框
    tddom .setAttribute("set","set");                 //设置标志区分TD
    td_info.appendChild(int);                         //向TD中添加input标签
    for(var i=0;i<dd.length;i++){                       //找到标记的TD删除点击事件
        dd[i].removeEventListener("click",add);
    }
}
function xiaoshi(){                                       .//设置一个取消input的方法
    var td_a2=this;                                         //保证this是事件本身不会变化
    var int_info=int.getAttribute("value");   
    if(td_a2.getAttribute("set")=="set"){         //找到标记的TD
        td_a2.innerHTML=int_info;                  //将内容给TD
        td_a2.setAttribute("set","");                 //清除标记
    }

//向每个TD中添加点击事件

dd=document.getElementsByTagName("td");
    for(var f=0;f<dd.length;f++){
        dd[f].addEventListener("click",add);
    }
}
function del(obj){                                                       //定义删除方法
    var obj1=this;                                                        //保证this是事件本身不会变化
    var tr=document.getElementsByTagName("tr");  
        n=obj1.getAttribute("flage");                               //获取标记
    for(var i=0;i<tr.length;i++){                                     //找到标记并执行删除操作
        if(n==tr[i].getAttribute("flage")){
        tr[i].remove();
        }
    }
}

易错点注意:

1.注意给删除按钮和TR添加标记,少添加时会引找不到标记而删掉表格

2.注意获取TD标签时不要使用tddom,tddom是添加的,并不是整个单元格的TD,应重新定义TD

3.注意给TD设置标记

4.删除点击事件后应重新给每个TD重新添加

原文地址:https://www.cnblogs.com/diverman/p/8338155.html

时间: 2024-10-13 07:47:57

原生JS例子的相关文章

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

原生js实现数据双向绑定

最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里 缺点:一旦HTML代码生成就没有办法改变,如果有新数据重新传入,就必须重新把模板和数据整合到一起插入到文档流中 数据双向绑定 数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中,同样的,如果数据模型中的值发生变化,也会同步到视图中去

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

用原生JS写移动动画案例及实际应用

js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的左边或右边会有个分享的框,鼠标放上去就还移出一个列表,里面是要分享的地址.鼠标移开,就会移进去. 要实现这个效果要怎么做呢? 可以想一想,鼠标经过和鼠标离开很好理解 用onmousemove事件和onmouseout事件就能完成. 那移动动画呢?我们可以一步一步思考, 首先,一开始是这样的 完成移动

原生js的一些研究和总结(1)

数据类型 基本类型值包括: undefined,null,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,它们的值保存在栈空间,我们通过按值来访问的. 引用类型包括:对象.数组.函数等. 对于引用类型的值,则必须在堆内存中为这个值分配空间.由于引用类型值的大小不固定(对象有很多属性和方法,而且还可以动态的添加属性和方法),因此不能把他们保存到栈内存中.但内存地址大小是固定的,因此可以将内存地址保存在栈内存中. 简而言之:栈内存中存放的是基本数据类型值,堆内存中

原生JS实现瀑布流

浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.比如下面图片的效果,就是一个典型的瀑布流. 网上有很多JQ的瀑布流插件,而且都写好了兼容,都可以尝试去使用,这里只是跟大家分享一下原生js实现瀑布流的效果,一起学习. 一步一步来: 首先新建一个文件,就叫瀑布流.html吧. <!doctype html> <html

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 js的引入方式 在一对 script 标签中引入js代码 通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强. 示例代码: <html lang="en

原生js获取元素样式

摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中