<html>

<div class='add'>
             名字: <input type="" name="">年龄:<input type="" name=""><input type="button" value='add'>
     </div>
     <table id="tb">
           <tbody>
                  <tr><td>赵</td><td>11</td><td><button>删除</button></td></tr>
                  <tr><td>钱</td><td>22</td><td><button>删除</button></td></tr>
                  <tr><td>孙</td><td>33</td><td><button>删除</button></td></tr>
                  <tr><td>李</td><td>44</td><td><button>删除</button></td></tr>
                  <tr><td>周</td><td>55</td><td><button>删除</button></td></tr>
          </tbody>
    </table>

<script>

var tbody=document.getElementsByTagName('tbody')[0];
function color(){
         var tr=document.getElementsByTagName('tr');
         for(var i=0;i<tr.length;i++){
                 if(i%2==0){
                 tr[i].setAttribute('class','odd')
         }else{
                 tr[i].setAttribute('class','even')
        }
      }
}
function remove(){
        var child=tbody.children[0];
        var son=child.children;
        var button=document.getElementsByTagName('button');
        for(var i=0;i<button.length;i++){
             button[i].onclick=function(){
                    var thistr=this.parentNode.parentNode;
                    color()
                    tbody.removeChild(thistr)
             }
         }
color();
}
remove()

function add(){
       var input=document.getElementsByTagName('input');
       input[2].onclick=function(){
            var name=input[0].value;
            var age=input[1].value;

var name1=document.createTextNode(name);
    var age1=document.createTextNode(age);
    var but_=document.createTextNode('删除')

var tr=document.createElement('tr');

var td1=document.createElement('td');
    var td2=document.createElement('td');
    var td3=document.createElement('td');

var but=document.createElement('button');

td1.appendChild(name1);
    td2.appendChild(age1);
    but.appendChild(but_)

tbody.appendChild(tr).appendChild(td1);
    tbody.appendChild(tr).appendChild(td2);
    tbody.appendChild(tr).appendChild(td3).appendChild(but)

remove()
         color()
         }
    }
   add()

javascript之表格节点操作的更多相关文章

  1. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  2. JavaScript选择器和节点操作

    感谢:链接(视频讲解很清晰) 下文中讲解用到Chrome中的console调试台,如果不懂最好先看一下:链接 JavaScript选择器 作用:选取html中的标签等内容,最重要的还是为节点的操作(增 ...

  3. JavaScript原生的节点操作

    前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下. 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持.不包含文本节点. 注意:在IE中 ...

  4. JavaScript之DOM节点操作

    a.appendChild(b)  追加标签 a是b的父级,将b追加到a中 追加标签  a.insertBefore(b,c);  a是b和c的父级,在c前面插入b 删除标签  a.removeCli ...

  5. JS节点操作(JS原生+JQuery)

    JavaScript与JQuery节点操作   节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...

  6. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  7. javaScript之表格操作<一:新增行>

    DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...

  8. JavaScript -- 节点操作， 事件触发， 表单伸缩

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. day36—javascript对表格table的操作应用（一）

    转行学开发,代码100天——2018-04-21 今天记录一下,JavaScript对表格table的操作应用,包括表格元素的获取,创建,删除等. 一个普通的完整表格包括以下几个部分:table-&g ...

随机推荐

  1. [bzoj3308]九月的咖啡店_欧拉筛素数_费用流

    bzoj-3308 九月的咖啡店 题目大意:深绘里在九份开了一家咖啡让,如何调配咖啡民了她每天的头等大事我们假设她有N种原料,第i种原料编号为i,调配一杯咖啡则需要在这里若干种兑在一起.不过有些原料不 ...

  2. Ionic 学习笔记

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7831153.html 注: 本篇学习笔记基于Ionic 3 ...

  3. 【面试 JDK】【第一篇】Object类面试详解

    1.Object类有哪些方法 1>clone()方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否则抛出CloneNotSupportedException异 ...

  4. 锤子Smartisan T1手机官方4.4.2系统内核版本号信息

    从锤子smartisan T1手机官方系统EGL中获取内核版本号信息(由cofface提供): I/Adreno-EGL(  816): <qeglDrvAPI_eglInitialize:41 ...

  5. HDU 3118 Arbiter 判定奇圈

    题目来源:pid=3118">HDU 3118 Arbiter 题意:翻译过来就是不能有奇圈 每走一步状态会变化 当他回到起点时假设和原来的状态不一样 可能会死 求至少去掉多少条边能够 ...

  6. Java学习之String StringBuffer StringBuilder区别

    1.String:对象长度是不可变的,是线程安全. 2.StringBuffer:对象长度是可变的,是线程安全. 3.StringBuilder:对象长度是可变,不是线程安全.

  7. WPF MVVM UI分离之《交互与数据分离》 基础才是重中之重~delegate里的Invoke和BeginInvoke 将不确定变为确定系列~目录（“机器最能证明一切”） 爱上MVC3系列~全局异常处理与异常日志 基础才是重中之重~lock和monitor的区别 将不确定变成确定~我想监视我的对象，如果是某个值，就叫另一些方法自动运行 将不确定变成确定~LINQ DBML模型可以对

    WPF MVVM UI分离之<交互与数据分离>   在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架. 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下 ...

  8. 手动编译一个c文件（Win7下如何使用GCC编译器）

    主要参考这篇http://jingyan.baidu.com/article/c275f6bacc0126e33c756771.html 我没找到minGW的下载地址,而是直接用codeblocks自 ...

  9. VLFeat中SIFT特征点检测

    本代码使用VLFeat库中的函数对一幅图像进行了SIFT检测 需要事先配置好VLFeat和OpenCV,VLFeat的配置参考前一篇博文,OpenCV的配置网上一大堆,自己去百度 #include & ...

  10. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...