精华内容
下载资源
问答
  • 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 });
                }
            }
    

    鼠标用上去会显示出隐藏的添加与删除按钮
    在这里插入图片描述

    展开全文
  • 如何在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,动态删除 jQuery 动态添加或删除表格行特效,每点击次添加,会添加表格单元格,点击删除会删掉所有,基于jQuery插件完成,想研究的朋友下载看。
  • 主要介绍了JS/jQuery实现超简单的Table表格添加,删除行功能,结合实例形式详细分析了JS与jQuery针对Table表格添加,删除行功能的相关实现技巧,需要的朋友可以参考下
  • 一行 (this.id)"> 第二行 ``` .CS的代码 ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI;...
  • 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>
    

    在这里插入图片描述

    表单元素

    1. input 文本框/密码框/单选按钮/复选框…
    2. seletc 下拉列表
    3. textarea 文本域—富文本编辑器
    4. 在这里插入图片描述
    展开全文
  • web前端创建表格

    千次阅读 2019-02-18 20:15:59
    1.1创建表格  &lt;table&gt;  &lt;tr&gt;  &lt;td&gt;&lt;单元格&lt;/td&gt;  &lt;td&gt;&lt;单元格&lt;/td&gt;  &lt;td&gt;&lt;单元格&...

    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表格输入控件 1、支持上下左右键切换单元格焦点; 2、支持backspace删除整行功能:把焦点移到最后一个单元格,按backspace键可以从尾删到行首;
  • JavaScript动态添加删除表格行

    千次阅读 2006-03-31 11:26:00
    昨天同学问到JSP中动态添加组输入框怎么实现,我想JSP或ASP以及CGI等可用于WEB编程的都不外乎两种方法实现,种是...我想用个动态添加删除表格行的JS例子稍微修改一下就可以实现所要的结果,修改后的代码如下: 
  • 国产开源web电子表格

    千次阅读 2012-05-07 14:19:53
    顺表控件是基于Web的类似于微软Excel的网页电子表格控件,是款Javascript电子表格控件。 顺表的源代码开放,可以用于Web报表设计器,Web电子表格编辑器,中国特色的电子表单设计器等。 该Web Excel控件可以和...
  • 界面是仿extjs的,虽然说已经审美疲劳了,但是也找不出更好的界面设计了。 主要功能 1.无限制的和列(增加删除) 2.单元格选定多个 3.单元格不同格式(字体,字号等) 4.统计函数 5.undo/redo
  • web项目中的动态表格

    千次阅读 2016-05-12 21:54:06
    web项目中操作最多的之,要数表格了。此时,静态表格再也不能满足人们的需求了,动态表格就体现出了它的优势。 、创建表格  第种动态创建表格的方法:  document.createElement() 方法 //用于...
  • 基于vue实现web端超大数据量表格

    千次阅读 2019-04-02 02:12:03
    公司有个定位系统,基本上来说个定位单位分钟或者更短就会有个定位点,这样天下来就会有很多定位点了,如果表格想要下子放天甚至三天的数据,那么数据量将会特别大(可能会到达5万条左右的数据),...
  • 1、表格的每一行都有一个CheckBox按钮,所以为每一行的复选按钮在HTML代码中设置为同一个name=“case_chk”,并设置复选框的值为想要获取的用例id,然后在加载完的页面通过name获取复选框,再遍历判断是否被选中,...
  • Layui一直是本小编使用的前端,因为使用方便可操作性强外观美观,让后端全栈的小编感觉很巴适。总结使人进步,那么现在我就直接撒干货了。...这篇文章会直接吧可编辑列表的新增一行删除、更新以及查询都...
  • 表格如图所示:![图片说明](https://img-ask.csdn.net/upload/201612/31/1483165978_293951.png) 如果要修改或删除数据,并将结果反馈到数据库中,怎样获取这一行数据的管理员名称
  • 将除了删除掉的这数据外的其他数据添加入个新的数组; 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代码: &lt;%@ page language="java" pageEncoding="UTF-8"%&gt...
  • web(四) 表格与合并单元格

    千次阅读 2019-05-09 20:25:47
    表格表格的主要目的创建表格表格的属性表头 表格的主要目的 显示数据 并不适合用来做布局 创建表格 <table width="" border="1"> <tr> <td>姓名</td> <td>性别</td> <...
  • 2、支持backspace删除整行功能:把焦点移到最后一个单元格,按backspace键可以从尾删到行首; 3、支持alt+x删除焦点所在; 4、支持焦点设置功能; 5、表头无限制,任意设置; 6、支持计算功能; 7、支持...
  • 需要删除一列 然后前面的加一个rowspan指明占用的行数--> </tr> <tr> 表格内容 表格内容 表格内容 表格内容 <tr> 表格内容 表格内容 表格内容 表格内容 表格内容 <tr> 表格内容 表格内容 表格...
  • 2、支持backspace删除整行功能:把焦点移到最后一个单元格,按backspace键可以从尾删到行首; 3、支持alt+x删除焦点所在; 4、支持焦点设置功能; 5、表头无限制,任意设置; 6、增加操作列,把序号列和操作...
  • 、Element UI中表格数据的删除表格数据的删除按钮下,进行绑定删除事件,removeUserById()。在这个是事件中,传入当前项的id值,通过scope.row.id就可以获得当前项的id值,代码如下: <!-- 删除按钮 --&...
  • 本人初学web 例如现在我有个table table里面有很多里面都有删除按钮. 例如我点击第二删除,那该这么写代码?
  • javascript表格信息增添与删除

    千次阅读 热门讨论 2021-04-03 13:14:42
    JavaScript入门 JavaScript是种轻量级、解释型的Web开发...对于表格信息的增添与删除 简单的DOM操作html标签即可实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=
  • 使用jquery为表格动态添加行数据,以及删除一行数据
  • 是基于Web的类似于微软Excel的网页电子表格控件,是款Javascript电子表格控件。 顺表的源代码开放,可以用于 Web报表设计器 , Web电子表格编辑器 ,中国特色的 电子表单设计器 等。 该Web Excel控件可以和Java/...
  • 删除改行 rows.splice(index, 1 ); }, addRow(tableData,event){ tableData.push({ fildna: '',fildtp:'',remark:'' }) }, } 好了,就是这么简单。。。 转载于:...
  • Web网页设计之HTML_5. HTML 表格

    千次阅读 2020-07-31 23:18:30
    、认识表格 通过百度百科可以看到,这个表格就是种整理数据的手段,很简单啊,仅此而已 二、表格的基本构造 表格啊,有表头、有表体,就这两个,HTML 中也提供了很多类型的标签去让我们的表格更好用 1...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,391
精华内容 21,756
关键字:

web删除最后一行表格