<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. HUNAN 11560 Yangyang loves AC(二分+贪心)

    http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11560&courseid=0 题意:总共有n天,每天 ...

  2. openSUSE Leap 15.0 初始配置

    添加源: # 禁用原有软件源 sudo zypper mr -da # 添加阿里镜像源 sudo zypper ar -fc https://mirrors.aliyun.com/opensuse/d ...

  3. 安装ubuntu 12.04 后遇到的问题

    我的笔记本是08年的戴尔,比较老的机子了.给本本安装ubuntu/windows8双系统后,ubuntu系统中出现了一些问题,在网上搜寻许多解决方法,管用的就分享一下,顺便做一下记录,免得下次自己又不 ...

  4. Codeforces 12 D Ball

    Discription N ladies attend the ball in the King's palace. Every lady can be described with three va ...

  5. ACM用到的算法。先做个笔记，记一下

    ACM 所有算法 数据结构 栈,队列,链表 哈希表,哈希数组 堆,优先队列 双端队列 可并堆 左偏堆 二叉查找树 Treap 伸展树 并查集 集合计数问题 二分图的识别 平衡二叉树 二叉排序树 线段树 ...

  6. 梯度下降和EM算法，kmeans的em推导

    I. 牛顿迭代法给定一个复杂的非线性函数f(x),希望求它的最小值,我们一般可以这样做,假定它足够光滑,那么它的最小值也就是它的极小值点,满足f′(x0)=0,然后可以转化为求方程f′(x)=0的根了 ...

  7. Golang Global Variable access

    golang 中全局变量的问题. ------------------------------------------------------------------ 17down votefavor ...

  8. 零基础学python-3.2 变量赋值

    这一节我们来具体展开变量赋值 1.以下我们举各种赋值的样例 anInt=12 anFloat=2.2 anStr='string' aList=['a','a','a'] anArray=(1,2,3 ...

  9. 生活娱乐 ATM机键盘余温泄露密码

    安全系统存漏洞 ATM机键盘余温或泄露密码 ATM机会泄露你的银行卡密码? 据美国<大众科学>网站8月30日报道,你的手指在ATM机上留下的余温能让尾随你而来的黑客准确获知你的密码. 加利 ...

  10. 第04章-VTK基础（3）

    [译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934- ...