js 操作表格行数的删减
沉溺了好几个月了,自从年假回来就一直在忙换工作的事情;
新环境、新同事,一如既往的工作,
那么闲话不多说,前两天师妹问我要一个类似于添加和删除的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 操作表格行数的删减的更多相关文章
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- 通过jQuery实时监听表格行数变化
[本文出自天外归云的博客园] 使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数.想要监听表格变化,如何做呢? 使用场景:有一个表格里放着许多测试 ...
- js操作表格
js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法 表格有几行: var trCnt = table.rows.length ...
- js操作表格、table、
js添加一行.删除一行 let str="<tr>" +"<td>"+a[1]+"</td>" +&qu ...
- js实现表格行的动态加入------Day56
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/36752655 现代页面通常都是用div+ ...
- JS实战 · 表格行颜色间隔显示,并在鼠标指定行上高亮显示
思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定: 前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...
- 动态操作表格行(兼容IE、火狐)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用js操作表格
效果图: 任务: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff var tr=document.getElementsByTagName(" ...
- js设置奇偶行数样式
$(document).ready(function () { odd = { "background": "none" }; //奇数样式 even = { ...
随机推荐
- CF549BLooksery Party题解
题目描述 The Looksery company, consisting of nn staff members, is planning another big party. Every empl ...
- 布局方式-float布局
float的特性一 .元素‘浮动’ .脱离文档流 .但不脱离文本流 首先看一个案例,直观的了解下float的特性 <style> .container{ background: red; ...
- [18/11/26] this关键字、static关键字和静态块(及语句块)
1.this关键字 this的本质就是“创建好的对象的地址”! 由于在构造方法调用前,对象已经创建.因此,在构造方法中也可以使用this代表“当前对象” [用法] 1. 在程序中产生二义性之处 ...
- 2018.12.21 如何在现有的Eclipse(4.9.0版本)中安装STS (Spring Tool Suite ) Mac环境下
在Eclipse中安装STS正确步骤实现方式 1.简介说明 spring Tool Suite(sts)就是一个基于Eclipse的开发环境, 用于开发Spring应用程序.它提供了一个现 ...
- GetClassLoader和GetCallerClass的使用
GetClassLoader是JAVA中用来得到ClassLoader的 JAVA中有以下几种ClassLoader. 1. Bootstrap ClassLoader - GetClassLoad ...
- maven学习记录一——maven介绍及入门
1 Maven的简介 1.1 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 1.2 Maven好处 普通的传统项目 M ...
- 【洛谷P3627】[APIO2009]抢掠计划
抢掠计划 题目链接 比较水的缩点模板题,Tarjan缩点,重新建图,记录联通块的钱数.是否有酒吧 DAG上记忆化搜索即可 #include<iostream> #include<cs ...
- 【luogu P3901 数列找不同】 题解
对于区间查询的问题,提供一种思路: 莫队. 莫队是处理区间问题的乱搞神器,尤其是对于离线查询问题,当然也可以做在线查询,比如带修莫队. 对于有的题,莫队是乱搞骗分,而在某些地方,莫队是正解. 这道题来 ...
- bat 批处理变量
@echo off setlocal enabledelayedexpansion d: rem 更改d:\bat为当前目录 cd /d bat rem 变量使用 + echo %a% echo %C ...
- detection工作
今天看到YOLO2的工作还是很不错的,效果好,关键是速度也快,已经完胜SSD了感觉. 虽然faster rcnn各方面效果都不错,但是从简单粗暴的角度考虑,SSD和YOLO真的深得我心啊. 检测模型, ...