web删除最后一行表格

Web表格添加与删除行

2019-03-29 19:41:06

Web表格添加与删除行 开发工具与关键技术：Visual Studio 2015，jQuery，JavaScript 作者：张启翔撰写时间：2019-02-07 下面是使用jQuery写的一个添加行以及删除行的功能。首先把前端表的样式写出来，这里...

Web表格添加与删除行 
开发工具与关键技术：Visual Studio 2015，jQuery，JavaScript
撰写时间：2019-02-07
 
下面是使用jQuery写的一个添加行以及删除行的功能。
 首先把前端表的样式写出来，这里是使用bsgrid表格写的，所以表结构分为三部分：表头（thead）、表身（tbody）以及表尾（tfoot）
 
 而我在表身部分添加了个id方便控制，同时也没有在表身部分写div里面写样式的代码，而在script标签里写（方便调用样式和索引值的改变）
 下图是script标签里写的表身的样式代码，以及行索引值随着添加或删除自动改变
 
 在添加商品行事件的结尾处，
 要将添加行事件在对应的table表格中
 
 在自动添加行的时候调用addrow方法，让在刷新页面的时候自动添加六行 
 //自动循环6次添加行事件
        $(document).ready(function () {
            for (var i = 0; i < 6; i++) {
                addrow();
            }
        });
 
添加行也是调用addrow方法添加相同的样式，
 添加行是在最后添加行的，也可以在点击的当前行下添加，但代码会更繁琐点，也会影响到索引值的改变 
 //点击当前在下一行添加
        function addRow(add) {
            var tr = add.parent().parent().parent();
            tr.append(addrow());
        }
 
这里删除行是删除当前行，里面有个判断是为了不让删除最后一行 
//点击当前行删除
        function deleteRow(acc) {
            var tr = acc.parent().parent().parent();
            var trL = $("#tabdetail tr").length - 2;
            if (trL > 1) {
                tr.remove();
                for (var i = 0; i < $("#OperationOne tr").length ; i++) {
                    $("#OperationOne tr").eq(i).find("td").eq(0).find("input").val(i + 1);
                }
            } else {
                layer.msg("不能再删啦",
                        { icon: 4 });
            }
        }
 
鼠标用上去会显示出隐藏的添加与删除按钮

收起

展开全文

JavaScript

如何在web页面上删除一行数据

千次阅读 2019-07-31 17:07:48

效果大概就是这样：主要代码： <script type="text/javascript">... function deleteRow(link) { var x = confirm("确认删除吗？...x) //确认删除就是true 取消就是false 这里是取反，所...

  
效果大概就是这样： 
 
  
主要代码： 
<script type="text/javascript">
	function deleteRow(link) {        
		var x = confirm("确认删除吗？")                //弹出确认删除弹窗
		if(!x)     //确认删除就是true  取消就是false  这里是取反，所以当取消的时候，就直接返回
			return;

		var table = document.getElementById("heroTable");    //先得到这个表格
		var td = link.parentNode;        //先从删除按钮取到的父节点   向上取到td
		var tr = td.parentNode;          //再取td的父节点     向上取到tr，也就是定位到这一行
		var index = tr.rowIndex;         //在得到这一行的序列
		table.deleteRow(index);         //再在这个表格删除这个序列
	}
	
</script> 
全部代码：  
<!DOCTYPE html>
<html>
<head>
	<title>删除元素</title>
</head>
<body>
	<table width="100%" border = "1" cellspacing="0" id="heroTable">  //设置一个id表示符

		<tr>
			<td width="50%"> 英雄名称</td>
			<td>操作</td>
		</tr>

		<tr>
			<td>盖伦</td>
			<td>
				<a href="#" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>

		<tr>
			<td>光辉</td>
			<td>
				<a href="#" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>

		<tr>
			<td>冷家豪</td>
			<td>
				<a href="#" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>
		
	</table>

</body>
<script type="text/javascript">
	function deleteRow(link) {        
		var x = confirm("确认删除吗？")                //弹出确认删除弹窗
		if(!x)     //确认删除就是true  取消就是false  这里是取反，所以当取消的时候，就直接返回
			return;

		var table = document.getElementById("heroTable");    //先得到这个表格
		var td = link.parentNode;        //先从删除按钮取到的父节点   向上取到td
		var tr = td.parentNode;          //再取td的父节点     向上取到tr，也就是定位到这一行
		var index = tr.rowIndex;         //在得到这一行的序列
		table.deleteRow(index);         //再在这个表格删除这个序列
	}
	
</script>
</html>

收起

展开全文

前端

jQuery 动态添加、删除表格行特效
2021-05-12 09:14:50
内容索引:脚本资源,jQuery,动态删除　jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
收起
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2020-10-16 15:10:02
主要介绍了JS/jQuery实现超简单的Table表格添加,删除行功能,结合实例形式详细分析了JS与jQuery针对Table表格添加,删除行功能的相关实现技巧,需要的朋友可以参考下
收起
asp.net动态删除表格的行
2016-04-25 18:24:53
第一行 (this.id)"> 第二行 ``` .CS的代码 ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI;...
收起
asp.net

web表格制作

千次阅读 2020-08-20 16:32:22

表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–...

1.表格的制作
 1、表格元素–<table>
 表格中的行–<tr>
 表格中的列–<td>
 表格中的表头–【居中/加粗】
 table标记的边框–border
 table标记的宽度–width
 table标记的高度–height
 table标记的水平对齐方式–align
 table标记的表格背景色–bgcolor
 table标记的表格边框色–bordercolor
 table标记的表格中的内容与边框之间的距离–cellpadding
 table标记的表格中的边框与边框之间的距离–cellspacing【默认是1px】
 tr标记的align属性–设置当前行的水平对齐方式
 tr标记的bgcolor属性–设置当前行的背景色
 tr标记的valign属性–设置当前行的垂直对齐方式【top/middle/bottom】
 td标记的align属性–设置当前列的水平对齐方式
 td标记的bgcolor属性–设置当前列的背景色
 td标记的valign属性–设置当前列的垂直对齐方式【top/middle/bottom】
 合并单元格
 水平方向合并单元格–跨列—colspan
 垂直方向合并单元格–跨行—rowspan 
 删除多余的单元格*
  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器的控制面板</title>
	</head>
	<body>
		<table border="1" cellspacing="10px" cellpadding="20px"
		 align="center" bgcolor="aliceblue">
			<tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>
			<tr align="center">
			<td>MC</td>
			<td>MR</td>
			<td>MS</td>
			<td>M+</td>
			<td>M-</td>
			</tr>
			<tr align="center">
			<td>&lt;-</td>
			<td>CE</td>
			<td>C</td>
			<td>+/-</td>
			<td>√</td>
			</tr>
			<tr align="center">
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>/</td>
			<td>%</td>
			</tr>
			<tr align="center">
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>*</td>
			<td>1/x</td>
			</tr>
			<tr align="center">
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>-</td>
			<td rowspan="2" bgcolor="yellow">=
			</td>
			</tr>
			<tr align="center">
			<td colspan="2">0</td>
			<td>.</td>
			<td>+</td>
			</tr>
		</table>
	</body>
</html>
 

 2. 列表元素
 2.1 有序列表
 ol—有序列表
 li—列表中的每一项【条目】
 默认的标志是有顺序的数字
 我们可以通过ol的type属性来修改标志
 1–有顺序的数字
 a–有顺序的小写字母
 A–有顺序的大写字母
 i–有顺序的小写罗马数字
 I–有顺序的大写罗马数字
 start属性设置书顺序的开始值
 2.2 无序列表
 ul—无序列表
 li—列表中的每一项【条目】
 默认的标志是实心点
 我们可以通过ul的type属性来修改标志
 circle–圆形【。】
 disc----实心点[默认]
 square–正方形
 none–没有标志
 2.3 自定义列表
 dl—自定义列表
 dt—自定义列表的头
 dd—子项目 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
	 <ul type="none">
	 	<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	 </ul>
	 <ol type="A">
	 	<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	 </ol>
	 <dl>
		 <dt>自定义列表</dt>
		 <dt>自定义列表</dt>
		 <dt>自定义列表</dt>
	 </dl>
	</body>
</html>
 

 3. 表单<form>
 主要负责采集信息的，可以将采集的信息提交。
 form的属性
 action—指定表单数据的后端处理程序
 method----指定表单数据的提交方式【get[默认]/post】
 get提交数据会将被处理的数据跟随在请求地址之后
 被提交的数据255个字符
 https://www.baidu.com/s?&wd=html
 post提交数据会将被处理的数据封装到http协议的头
 https://www.baidu.com/s
 被提交的数据没有限制
 通常情况下提交文件只能用post
 enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" align="center" cellpadding="20px" cellspacing="0">
			<tr>
			<td>application/x-www-form-urlencoded</td>
			<td>在发送前对所有字符进行编码（默认）。</td>
			</tr>
			<tr>
			<td>multipart/form-data</td>
			<td>不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
			</td>
			</tr>
			<tr>
			<td>text/plain</td>
			<td>将空格转换为 "+" 符号，但不编码特殊字符。</td>
			</tr>
		</table>
	</body>
</html>
 
 
表单元素 
input 文本框/密码框/单选按钮/复选框…
seletc 下拉列表
textarea 文本域—富文本编辑器

收起

展开全文

html

web前端创建表格

千次阅读 2019-02-18 20:15:59

1.1创建表格 <table> <tr> <td><单元格</td> <td><单元格</td> <td><单元格&...

1.1创建表格 
 <table>
        <tr>
          <td><单元格</td>
          <td><单元格</td>
          <td><单元格</td>
        </tr>
        <tr>
          <td><单元格</td>
          <td><单元格</td>
          <td><单元格</td>
        </tr>
        <tr>
          <td><单元格</td>
          <td><单元格</td>
          <td><单元格</td>
        </tr>
    </table> 
表格至少有三个基本标签构成； table代表一个表格 tr代表行 td代表单元格
 tr必须嵌套在table标签里，td必须嵌套在tr或者th标签 
1.2表格属性
 width 属性
 height 高度
 border 边框
 align  表格的对齐方式
 cellspacing 单元格与单元格之间的距离
 cellpadding 单元格与单元格内容的间距 
1.3表格的表头标签
 在合适的位置上将td替换成th即可  th比td更加有语义，并且会将内部的文字加粗居中
 <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
 </tr>
 1.4表格结构
    <thead>
       <tr>
         <th>姓名</th>
         <th>年龄</th>
         <th>性别</th>
       </tr>      
     </thead>
     <tbody>
       <tr>
         <td>小明</td>
         <td>18</td>
         <td>男</td>
       </tr>
       <tr>
         <td>小强</td>
         <td>18</td>
         <td>女</td>
       </tr>
     </tbody>
 表格的结构并非一定要，但是有结构的表格语义更明确 
1.5合并单元格
 跨行合并 rowspan 上下合并 将rowspan写在上面的单元格
 跨列合并 colspane  左右合并 将colspan写在左边的单元格 
需要合并几个单元格， 这个值就是几， 一旦合并了多余的单元格需要删除多余的单元格

收起

展开全文

仿excel的web表格输入控件
2009-04-02 16:07:20
仿excel的web表格输入控件 1、支持上下左右键切换单元格焦点； 2、支持backspace删除整行功能：把焦点移到最后一个单元格，按backspace键可以从行尾删到行首；
收起
JavaScript动态添加删除表格行
千次阅读 2006-03-31 11:26:00
昨天同学问到JSP中动态添加一组输入框怎么实现，我想JSP或ASP以及CGI等可用于WEB编程的都不外乎两种方法实现，一种是...我想用一个动态添加删除表格行的JS例子稍微修改一下就可以实现所要的结果，修改后的代码如下：
收起
javascript input button function jsp
国产开源web电子表格
千次阅读 2012-05-07 14:19:53
顺表控件是基于Web的类似于微软Excel的网页电子表格控件，是一款Javascript电子表格控件。顺表的源代码开放，可以用于Web报表设计器，Web电子表格编辑器，中国特色的电子表单设计器等。该Web Excel控件可以和...
收起
excel javascript 微软
网页web简单的电子表格实现
2011-09-03 16:01:11
界面是仿extjs的，虽然说已经审美疲劳了，但是也找不出更好的界面设计了。主要功能 1.无限制的行和列（增加删除） 2.单元格选定多个 3.单元格不同格式（字体，字号等） 4.统计函数 5.undo/redo
收起
web项目中的动态表格
千次阅读 2016-05-12 21:54:06
web项目中操作最多的之一，要数表格了。此时，静态表格再也不能满足人们的需求了，动态表格就体现出了它的优势。一、创建表格第一种动态创建表格的方法： document.createElement() 方法 //用于...
收起
JavaScript
基于vue实现web端超大数据量表格
千次阅读 2019-04-02 02:12:03
公司有一个定位系统，基本上来说一个定位单位一分钟或者更短就会有一个定位点，这样一天下来就会有很多定位点了，如果表格想要一下子放一天甚至三天的数据，那么数据量将会特别大（可能会到达5万条左右的数据），...
收起
Python web开发之页面表格选择CheckBox复选框所在行的数据并返回
千次阅读 2018-06-15 19:06:02
1、表格的每一行都有一个CheckBox按钮，所以为每一行的复选按钮在HTML代码中设置为同一个name=“case_chk”，并设置复选框的值为想要获取的用例id，然后在加载完的页面通过name获取复选框，再遍历判断是否被选中，...
收起
CheckBox Python
layui可编辑表格新增、保存、删除操作以及注意事项
千次阅读 2019-10-11 10:03:34
Layui一直是本小编使用的前端，因为使用方便可操作性强外观美观，让后端全栈的小编感觉很巴适。总结使人进步，那么现在我就直接撒干货了。...这篇文章会直接吧可编辑列表的新增一行、删除、更新以及查询都...
收起
layui
后台怎样获取jsp页面表格中一行数据的id
2016-12-31 06:35:07
表格如图所示：![图片说明](https://img-ask.csdn.net/upload/201612/31/1483165978_293951.png) 如果要修改或删除数据，并将结果反馈到数据库中，怎样获取这一行数据的管理员名称
收起
java 数据库
前端点击删除按钮删除table表格的数据
千次阅读 2018-06-01 08:32:00
将除了删除掉的这行数据外的其他数据添加入一个新的数组； 22 } 23 } 24 } 25 node.svcFuncDfs = svcFuncDfData; // 再放入node中； 26 nodes[operateId] = node; // 再放入nodes中； 27 } ...
收起
Html+js实现表格可编辑，并能动态添加删除行
万次阅读 多人点赞 2014-12-10 20:18:56
功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格...点击删除行，删除table中最末尾的一行。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh...
收起
js动态给table表格的行添加删除线
千次阅读 2018-08-04 18:26:41
而不是在每个tr单元格添加css属性text-decoration，因为删除线要连续不间断。利用添加一个设置属性了的div去实现 jsp代码： <%@ page language="java" pageEncoding="UTF-8"%&gt...
收起
web(四) 表格与合并单元格
千次阅读 2019-05-09 20:25:47
表格表格的主要目的创建表格表格的属性表头表格的主要目的显示数据并不适合用来做布局创建表格 <table width="" border="1"> <tr> <td>姓名</td> <td>性别</td> <...
收起
开放源代码的仿Excel的web表格控件（1.4）
2010-12-23 13:10:13
2、支持backspace删除整行功能：把焦点移到最后一个单元格，按backspace键可以从行尾删到行首； 3、支持alt+x删除焦点所在行； 4、支持焦点设置功能； 5、表头无限制，任意设置； 6、支持计算功能； 7、支持行...
收起
web前端入门到实战：html表格table的使用,以及表格的css样式
千次阅读 2019-10-15 21:46:44
需要删除一列然后前面的加一个rowspan指明占用的行数--> </tr> <tr> 表格内容表格内容表格内容表格内容 <tr> 表格内容表格内容表格内容表格内容表格内容 <tr> 表格内容表格内容表格...
收起
html 前端前端开发
开放源代码的仿Excel的web表格控件（1.3）
2010-02-02 11:10:41
2、支持backspace删除整行功能：把焦点移到最后一个单元格，按backspace键可以从行尾删到行首； 3、支持alt+x删除焦点所在行； 4、支持焦点设置功能； 5、表头无限制，任意设置； 6、增加操作列，把序号列和操作...
收起
vue结合Element UI如何实现表格数据的删除操作
千次阅读 2020-02-11 12:38:24
一、Element UI中表格数据的删除在表格数据的删除按钮下，进行绑定删除事件，removeUserById()。在这个是事件中，传入当前项的id值，通过scope.row.id就可以获得当前项的id值，代码如下： <!-- 删除按钮 --&...
收起
vue ElementUI
JQ关于表格删除的问题
2016-07-07 10:36:58
本人初学web 例如现在我有一个table table里面有很多行每行里面都有一个删除按钮. 例如我点击第二行的删除,那该这么写代码?
收起
javascript表格信息增添与删除
千次阅读 热门讨论 2021-04-03 13:14:42
JavaScript入门 JavaScript是一种轻量级、解释型的Web开发...对于表格信息的增添与删除简单的DOM操作html标签即可实现，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
收起
jquery案例，为表格动态添加行
2013-10-21 09:32:04
使用jquery为表格动态添加行数据,以及删除某一行数据
收起
国产的开源电子表格web网页电子表格
千次阅读 2012-05-07 14:21:00
是基于Web的类似于微软Excel的网页电子表格控件，是一款Javascript电子表格控件。顺表的源代码开放，可以用于 Web报表设计器， Web电子表格编辑器，中国特色的电子表单设计器等。该Web Excel控件可以和Java/...
收起
el-table实现表格的编辑、删除、以及新增行的方法
千次阅读 2019-03-03 16:57:00
删除改行 rows.splice(index, 1 ); }, addRow(tableData,event){ tableData.push({ fildna: '',fildtp:'',remark:'' }) }, } 好了，就是这么简单。。。转载于:...
收起
Web网页设计之HTML_5. HTML 表格
千次阅读 2020-07-31 23:18:30
一、认识表格通过百度百科可以看到，这个表格就是一种整理数据的手段，很简单啊，仅此而已二、表格的基本构造一个表格啊，有表头、有表体，就这两个，HTML 中也提供了很多类型的标签去让我们的表格更好用 1...
收起
html html table

Web表格添加与删除行

Web表格添加与删除行

如何在web页面上删除一行数据

jQuery 动态添加、删除表格行特效

JS/jQuery实现超简单的Table表格添加,删除行功能示例

asp.net动态删除表格的行

web表格制作

web前端创建表格

仿excel的web表格输入控件

JavaScript动态添加删除表格行

国产开源web电子表格

网页web简单的电子表格实现

web项目中的动态表格

基于vue实现web端超大数据量表格

Python web开发之页面表格选择CheckBox复选框所在行的数据并返回

layui可编辑表格新增、保存、删除操作以及注意事项

后台怎样获取jsp页面表格中一行数据的id

前端点击删除按钮删除table表格的数据

Html+js实现表格可编辑，并能动态添加删除行

js动态给table表格的行添加删除线

web(四) 表格与合并单元格

开放源代码的仿Excel的web表格控件（1.4）

web前端入门到实战：html表格table的使用,以及表格的css样式

开放源代码的仿Excel的web表格控件（1.3）

vue结合Element UI如何实现表格数据的删除操作

JQ关于表格删除的问题

javascript表格信息增添与删除

jquery案例，为表格动态添加行

国产的开源电子表格web网页电子表格

el-table实现表格的编辑、删除、以及新增行的方法

Web网页设计之HTML_5. HTML 表格

web删除最后一行表格