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

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

那么闲话不多说,前两天师妹问我要一个类似于添加和删除的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. BestCoder Round #81 (div.2)

    HDU:5670~5764 A题: 是一个3进制计数: #include <bits/stdc++.h> using namespace std; ]; int calc(long lon ...

  2. 【luogu P3388 割点(割顶)】 模板

    题目链接:https://www.luogu.org/problemnew/show/P3388 #include <cstdio> #include <cstring> #i ...

  3. mui的事件实现(持续更新)

    长按事件: mui('.mui-scroll').on('longtap', '.index-tab-item', function(e) { alert("长按生效") }); ...

  4. swiper插件使用技巧

    1.加载插件: <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href ...

  5. ios微信公众号分享回调事件

    IOS手机在分享成功后,回调事件无法正常执行,在回调方法里面加入: setTimeout(function () { //todo }, ); 例如: //分享 Share({ title: &quo ...

  6. awk分隔符

    最近需要检测日志,shell中用到了awk,因为分割条件不止一个,并且包括了中括号.在此记录一下关于多分隔符并且包含中括号的情况 awk -F'[=,]|[][]+' '{print $6}'

  7. Modify the apache2 default document and home page on ubuntu (ubuntu下修改apache2默认目录和默认主页)

    Change the apache2 default website directory As we know, The apache2 default directory at /var/www/, ...

  8. vue.js 组件-全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <! ...

  9. 主流浏览器内核,以及CSS3前缀识别码

    现在国内常见的浏览器有:IE.Firefox.QQ浏览器.Safari.Opera.Google Chrome.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.UC浏览器.遨游浏览器.世界之窗浏览器 ...

  10. php面向对象基础知识整理之类中的属性和方法的使用

    <?php /** * class Index * 类包含什么 * 1.创建类 * 2.类的属性和类中方法 * 3.类中访问修饰符 * 4.类的封装.继承.多态 */ // 创建类,创建的类名是 ...