zoukankan      html  css  js  c++  java
  • js实现动态删除表格的行或者列-------Day57

    昨天记录了动态加入表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,而且第几列的内容都能够加入上,先来回想下它的实现的关键点:

    1、var row=table.insertRow();加入一行;

    2、var cell1=row.insertCell();加入一个单元格;(假设在后面继续写var cell2=row.insertCell()的话。就是加入第二列;)

    3、cell1.innerHTML="第一列的内容";向第一个单元格中填充值



    以上就是昨天记录的动态加入一行的所有了,当然可以加入就能删除。而今天来记录的就是动态的删除。删除一行,删除一列。

    首先看删除一行:

    我们先来看存在的表格:


    这样,如今存在一个四行两列的表格。我们先来实现删除某指定一行:假定我们须要删除第三行,我们该怎么写呢?

    这样来看一下代码:在html代码中,在delRowbutton上加入方法onclick="c()";

    function c(){
    	var table=document.getElementById("tad");
    	var len=table.rows.length;
    	table.deleteRow(len-2);//这里删除的是倒数第二行。也就是第三行
    }
    这样我们来执行下,结果显示为:

    这样,第三行就被删除了。由此我们能够得知,删除一行的方法为deleteRow(index)。index为參数。表示第几行。这个參数时从上向下,由0開始数的,另外有特别须要注意的一点:假设參数不写,则效果与參数为0一样。表示删除最上面一行

    这样实现删除全部行是不是就有思路了,这样我们来写下代码:

    function c(){
    	var table=document.getElementById("tad");
    	var len=table.rows.length;
    	for(var i=0;i<len;i++){
    	    table.deleteRow();//也能够写成table.deleteRow(0);
    	}
    }
    这样我们来看下结果:


    就仅仅剩下table的外壳了,里面的内容全都不见了。原理我们懂了,代码我们也实现了。可是在实现过程中有几点我们须要注意:

    1、在循环中我们是首先获取的固定值。var len=table.rows.length;然后i<len,而不是直接写i<table.rows.length;

    想必大家都明确当中的原因,删除一行之后,在进入第二次循环的时候,表格已经变动了。则table.rows.length也改变了。然而i也增大了,等到table.row.length<=i的时候行并没有所有删光,在这个样例中的话应该是i=2的时候table.rows.length也等于2了,则就不再进行删除了,所以会余下两行,解决的办法之中的一个。当然就是按我写这样,还有一种也能够把i++去掉,知道len=0的时候停止也能够,可是理解起来有点麻烦了就

    2、在循环中我们写的是table.deleteRow()或者table.deleteRow(0),而不是table.deleteRow(i),跟1中的原因一样的哦



    接下来我们再来记录下删除列。假设说行是deleteRow()的话,列该怎么写呢,这里没有cols的事情。其实就是之前加入的单元格啊。将每一行的同一列上的单元格所有删除掉不就等同于删除了一列么,删除单元格的方法相同跟加入是相应的deleteCell();

    这样假设说仅仅删除固定列,怎么写也就呼之欲出了吧,继续就上面的表格进行操作,删除第三行第二列。我们来写下实现代码:

    function d(){
    	var table=document.getElementById("tad");
    	table.rows[2].deleteCell(1);
    }

    这个结果太明显了吧,那样全部列都删除也就easy多了。来继续实现下代码:

    function d(){
    	var table=document.getElementById("tad");
    	for(var i=0;i<table.rows.length;i++){
    		table.rows[i].deleteCell(1);
    	}
    }

    这个结果也就随之而来了,这样我们就实现了动态的删除行和列,我们再来总结下:

    1、删除行的方法:deleteRow();加入行则是insertRow();

    2、删除列,即是删除单元格,方法为:deleteCell();而加入列则是insertCell()



    近期工作碰到了个小问题,uml时序图一直没法彻底理解了呢,看起来挺简单的。可就绕不出那个弯了。加油啊...






  • 相关阅读:
    span 设置inline-block 写文字的span错位
    vue自定义指令clickoutside实现点击其他元素才会触发
    css 字体上下居中显示 解决安卓手机line-height的偏差
    vue-resource
    vue.js 接收url参数
    vue2.0 组件之间的数据传递
    url带#号,微信授权,微信分享那些坑
    url带#号,微信支付那些坑
    javascript中的对象
    css写出0.5px边框(一)
  • 原文地址:https://www.cnblogs.com/mfmdaoyou/p/6809390.html
Copyright © 2011-2022 走看看