沉溺了好几个月了，自从年假回来就一直在忙换工作的事情；

新环境、新同事，一如既往的工作，

那么闲话不多说，前两天师妹问我要一个类似于添加和删除的demo；闲暇时间我就参照一些代码写了一下，

（发现有错误的话：大神勿吐槽、勿喷）

1、首先我们来看一下效果：

就是类似这样的：

在点击删除行的时候删除行数；

在点击添加行的时候在已有的基础上依次添加行数，

2、其次，代码走起；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

      <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <style>

 *{

     margin: 30px;

 }

    </style>

 </head>

 <body>

     <table width="40%" border="1" id="tb" style=" border-collapse: collapse;border:1px dotted blue;font-size:14px; ">

 <tr>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 </tr>

 <tr>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 </tr>

 <tr>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 <td>一个萝卜一个坑，<br>一个美女一个配，</td>

 </tr>

 </table>

 <p>

 <br>

 <script>

 function delrow(){   //删除行

 var i=tb.rows.length;

 tb.deleteRow(i-1);

 }

 function addrow(){  //添加行

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

     var cellsNum = tb.rows[0].cells.length;

     for(var j = 0 ; j < cellsNum ; j++){

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

         td.innerHTML='add'+'<br />'+'new';

         tr.appendChild(td);

     }

     tb.tBodies[0].appendChild(tr);

 }

 </script>

 <button type="button" class="btn btn-success" onClick="delrow();">删除行</button>

 <button type="button" class="btn btn-info" onClick="addrow();">添加行</button>

  <p style="margin-left:300px;">------------------------------------尐瑞</p>

 </body>

 </html>

* 注：引用了bootstrap的按钮样式；（不喜，勿喷）

js 操作表格行数的删减的更多相关文章

  1. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  2. 通过jQuery实时监听表格行数变化

    [本文出自天外归云的博客园] 使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数.想要监听表格变化,如何做呢? 使用场景:有一个表格里放着许多测试 ...

  3. js操作表格

    js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法 表格有几行: var trCnt = table.rows.length ...

  4. js操作表格、table、

    js添加一行.删除一行 let str="<tr>" +"<td>"+a[1]+"</td>" +&qu ...

  5. js实现表格行的动态加入------Day56

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/36752655 现代页面通常都是用div+ ...

  6. JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  7. 动态操作表格行(兼容IE、火狐)

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

  8. 用js操作表格

    效果图: 任务: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff var tr=document.getElementsByTagName(" ...

  9. js设置奇偶行数样式

    $(document).ready(function () { odd = { "background": "none" }; //奇数样式 even = { ...

随机推荐

  1. VOJ1067 【矩阵经典7 构造矩阵】

    任意门:https://vijos.org/records/5be95b65d3d8a1366270262b 背景 守望者-warden,长期在暗夜精灵的的首都艾萨琳内担任视察监狱的任务,监狱是成长条 ...

  2. jmeter报"msg":"Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported"的解决方法

    1.报"msg":"Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supporte ...

  3. 【OJ-UVa227】

    耗时一周.哭. 本题重在输入输出.所以对英文题目的理解非常重要.看清楚题目,省时省力. 题目要点: 1.开始有5×5的数据,每行仅有5个字符.注意:样例输入中的尾部空格是无法复制的(UVa官网上),其 ...

  4. C++/C 内存大小

    #include <stdio.h> struct test1{    char a1;    int a2;    double a3;}; struct test2{    char ...

  5. nineoldandroid 详细使用并且实现drawerlayout侧滑动画

    nineoldandroid.view.ViewHelpe是一个为了兼容3.0以下的一个动画开源库 相关函数解读:(第一个参数都为动画对象,第二个为动画属性值的变化表达式) ViewHelper.se ...

  6. element 表单的input循环生成，并可单个input失去焦点单个验证并保存； （多个表单实例）

    <div class="box_item"> <el-form ref="aList" :model="form" :ru ...

  7. GoBelieve JS IM SDK接入备忘

    类IMService 构造函数 参数说明: * `observer` 回调对象(可选) 设置当前用户的access token 属性名:String accessToken 功能:在调用start之前 ...

  8. C++定义一个简单的Computer类

    /*定义一个简单的Computer类 有数据成员芯片(cpu).内存(ram).光驱(cdrom)等等, 有两个公有成员函数run.stop.cpu为CPU类的一个对象, ram为RAM类的一个对象, ...

  9. 爬虫——Handler处理器 和 自定义Opener

    我们之前一直都在使用的urlopen,这是一个特殊的opener(也就是模块帮我们构建好的). 但是基本的urlopen()方法不支持代理.cookie等其他的HTTP/HTTPS高级功能.所以要支持 ...

  10. wordpress整站无损搬迁的几种方法 最后一种最完美

    网站建设之wordpress整站无损搬迁的几种方法 最后一种最完美 网站搬家,当我们更换php虚拟主机,空间升级或更好空间提供商都会发生,站长们请注意,掌握网站迁移方法,是网站日常维护技术中必须掌握的 ...