精华内容
下载资源
问答
  • JavaScript表格增删改查

    2020-08-09 11:05:19
    有一个含有序号、姓名、年龄以及操作(修改和删除)的四列表格,在表格上方有个text文本框,分别对应序号、姓名、年龄,其后有两个按钮,分别为修改和增加。 1、当点击增加按钮时,按照一个模板增加,序号对应...

    前几天一个刚入门的小同学跟我聊天,问我一个简单的表格增删改查问题,大致需求是这样的:
    如图:
    在这里插入图片描述
    下图内容是固定的。

    有一个含有序号、姓名、年龄以及操作(修改和删除)的四列表格,在表格上方有三个text文本框,分别对应序号、姓名、年龄,其后有两个按钮,分别为修改和增加。
    1、当点击增加按钮时,按照一个模板(姓名:张三,年龄:20)从序号1开始增加1行,每次点击增加按钮,序号自动加1,当增加到限定行数时(比如:10行)弹框提示;
    2、当点击操作列内修改链接时可以将本行数据展示在表格对应的文本框中,修改后,点击修改按钮,将信息回显至原来的行内;
    3、当点击操作列内删除链接时可以删除本行数据;
    4、假如有已经删除的行,在点击增加时,按照从小到大的次序将空缺的行依次插入到表格中,原有的数据也要恢复。

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>JavaScript表格增删改查</title>
    	<script type="text/javascript">
    		var count = 0;//主计数器,用于记录当前增加了多少行
    		var upNum = 10;//用于限制增加的最大行数
    		var arr = new Array();//二维数组,用于存储一位数组
    		var arr1 = new Array();//一维数组,用于存储每次删除的行内容
    		var bigId = 0;//记录出现过的最大ID,用于判断正常增加行还是插入被删除的行
    		function zengjia() {
    			var table = document.getElementById("table");
    			var tr = document.createElement("tr");//创建tr标签
    			if (arr.length > 0) {//判断是否有被删除的行,若无,正常在最后添加
    				var temp = 0;//定义一个变量,用于临时存储交换数据
    				if (arr.length > 1) {//判断数组中元素个数是否大于1个,如果大于一个就从小到大冒泡排序
    					for (var i = 0; i < arr.length - 1; i++) {
    						for (var j = 0; j < arr.length - 1 - i; j++) {
    							//parseInt用于转换string为int,否则比较时会字典排序
    							if (parseInt(arr[j][0]) > parseInt(arr[j + 1][0])) {
    								temp = arr[j];
    								arr[j] = arr[j + 1];
    								arr[j + 1] = temp;
    							}						
    						}
    					}
    				}
    				var chaId = parseInt(arr[0][0]);//拿到ID最小的序号
    				if (parseInt(arr[0][0]) < bigId) {//判断插入还是在尾部添加,此处尾部添加和正常(未删除的情况)添加有区别
    					var chaPreviousId = chaId - 1;
    					var chaPreviousTd = document.getElementById(chaPreviousId);
    					if (chaPreviousId==0) {//判断当前需要插入的行数是否为第一行,因为第一行的前一节点的父节点为tbody,并不是table.
    						var chaPreviousTr = chaPreviousTd.parentNode.parentNode;
    						var chaNextTr = chaPreviousTr.nextSibling;
    						tr.innerHTML = '<td id="'+chaId+'">'+chaId+'</td><td>'+arr[0][1]+'</td><td>'+arr[0][2]+'</td><td><a href="#" οnclick="bianji(this)">编辑</a>&nbsp;<a href="#" οnclick="shanchu(this)">删除</a></td>';
    						table.insertBefore(tr,chaNextTr);
    					} else {
    						var chaPreviousTr = chaPreviousTd.parentNode;
    						var chaNextTr = chaPreviousTr.nextSibling;
    						tr.innerHTML = '<td id="'+chaId+'">'+chaId+'</td><td>'+arr[0][1]+'</td><td>'+arr[0][2]+'</td><td><a href="#" οnclick="bianji(this)">编辑</a>&nbsp;<a href="#" οnclick="shanchu(this)">删除</a></td>';
    						table.insertBefore(tr,chaNextTr);
    					}					
    				} else {
    					tr.innerHTML = '<td id="'+chaId+'">'+chaId+'</td><td>'+arr[0][1]+'</td><td>'+arr[0][2]+'</td><td><a href="#" οnclick="bianji(this)">编辑</a>&nbsp;<a href="#" οnclick="shanchu(this)">删除</a></td>';
    					table.appendChild(tr);
    				}
    				count++;
    				for (var i = 1; i < arr.length; i++) {//每次添加删除的行后,后续行数据前移一个索引位,并删除数组中最后一条数据
    					arr[i-1] = arr[i];
    				}
    				arr.pop();
    			} else {
    				if (count == upNum) {
    					alert("增加数据行数已超限,请升级会员!");
    					return;
    				}
    				count++;
    				tr.innerHTML = '<td id="'+count+'">'+count+'</td><td>张三</td><td>20</td><td><a href="#" οnclick="bianji(this)">编辑</a>&nbsp;<a href="#" οnclick="shanchu(this)">删除</a></td>';
    				table.appendChild(tr);
    				bigId = count;//存储已增加过行的最大值
    			}
    		}
    
    		var num;
    		var name1;
    		var age;
    		function bianji(obj) {
    			num = document.getElementById("num");
    			name1 = document.getElementById("name");
    			age = document.getElementById("age");
    			var ageTab = obj.parentNode.previousSibling;
    			var nameTab = ageTab.previousSibling;
    			var numTab = nameTab.previousSibling;
    			num.value = numTab.innerHTML;
    			name1.value = nameTab.innerHTML;
    			age.value = ageTab.innerHTML;
    		}
    
    		function shanchu(obj) {
    			var con = confirm("确认删除吗?")
    			if (con) {
    			var tr = obj.parentNode.parentNode;
    			var shanId = tr.firstChild.id;
    			var shanNa = tr.firstChild.nextSibling.innerHTML;
    			var shanAg = tr.firstChild.nextSibling.nextSibling.innerHTML;
    			arr1 = [parseInt(shanId),shanNa,parseInt(shanAg)];//将删除行的序号,姓名,年龄依次存储进一位数组,0号索引为序号
    			arr.push(arr1);//将获取的一位数组存入二维数组
    			tr.parentNode.removeChild(tr);
    			count--;//计数器减一操作
    			}
    		}
    
    		function xiugai() {
    			var numId = parseInt(num.value);
    			var td = document.getElementById(numId);
    			td.nextSibling.innerHTML = name1.value;
    			td.nextSibling.nextSibling.innerHTML = age.value;
    		}
    	</script>
    </head>
    <body>
    	序号:<input type="text" id="num" value="">
    	姓名:<input type="text" id="name" value="">
    	年龄:<input type="text" id="age" value="">
    	<input type="button" value="修改" onclick="xiugai()">
    	<input type="button" value="增加" onclick="zengjia()">
    	<table border="1" width="800px" id="table">
    		<tr align="center">
    			<td id="0">序号</td>
    			<td>姓名</td>
    			<td>年龄</td>
    			<td>操作</td>
    		</tr>
    	</table>
    </body>
    </html>
    

    (PS:第一次在这上边写东西,还不熟悉怎么使用,多指教!)

    展开全文
  •  还未来实习顶岗,我便满怀期待和憧憬迎接未来的路,我想象过实习时会遭遇的哪些困难,可是梦里走的再远,醒来还是床上,终究要行在实习的路上才知道会发生什么,遇到什么,会收获什么,会得到什么。...
  • 项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间...了解它的原理,你需要分清楚个属性: scrollHeight:指元素
  • 71. EXCEL中快速插入WORD表格 42 72. 设置单元格字体 43 73. 一个单元格中显示多行文字 43 74. 将网页上的数据引入到EXCEL表格 43 75. 取消超级链接 44 76. 编辑单元格内容 44 77. 设置单元格边框 45 78. 设置...
  • 比如: 导入一个130k的表格c#中将其转为datatable后,更改了一下表头和某些少量数据。... ////素金特殊要求:除表头从第三行开始绑定 //if (rowIndex ) //{ // rowIndex++; // continue; ...
  • 增加工作线程数显示 控制停止后开始的线程是否全部退出检查 1.3 Alpha 2017-07-20 一、增加停止按钮 二、增加暂停按钮 、拼接字典时自动根据字典类型增加 / 符号 使扫描结果更精准 1.2 Alpha 2017-07-18 一...
  • 增加工作线程数显示控制停止后开始的线程是否全部退出检查 1.3 Alpha 2017-07-20 一、增加停止按钮 二、增加暂停按钮 、拼接字典时自动根据字典类型增加/ 符号使扫描结果更精准 1.2 Alpha 2017-07-18 ...
  • [2]在表格左侧增加一列,表格上侧增加。[3]微调个体特征中较长的列,可以用“两字"代替一"长句"。[4]调整间距。第二步:调整单元格和字体位置—居中显示第步:去网格线点击视图——去掉网格线...
    565a0490a60f731145a31c851aac00a8.png
    excel制作三线表https://www.zhihu.com/video/1089673752664637440

    d23281ae6cd81ec27364c93a399ca85e.png
    成表

    21617faec241e7b563de7dbe132224ec.png
    原表

    第一步:调整行间距

    [1]调整行(右击左侧标题,使得每一行都“插入”空行)。

    [2]在表格左侧增加一列,表格上侧增加一行。

    [3]微调个体特征中较长的列,可以用“两行字"代替一行"长句"。

    [4]调整行间距。

    第二步:调整单元格和字体位置—居中显示

    第三步:去网格线

    点击视图——去掉网格线前面的√

    第四步:制作三线表

    [1]选中表格区域

    [2]点击开始—边框倒三角—线型—最粗线条—点击上框线和下框线

    [3]选择表格第一行—点击边框倒三角—线型—最细线条—点击下框线

    修改补充:上面的三线表有一个bug

    表注在底线下面,详细看下图:

    5ae0865044fe1108026b0c65a3159918.png

    简单 持续学习 快乐 持续骄傲。

    ——尾焉获牵

    展开全文
  • public static final String WEEK_WED = "星期"; public static final String WEEK_THU = "星期四"; public static final String WEEK_FRI = "星期五"; public static final String WEEK_SAT = "星期六"; ...
  • 客户提出这样一个要求,要报表生成后打印用户还能对表格进行调整,比如人为根据感官调整字体的大小间距等,当时网上找了些报表控件看了一下,都不能满足后期调整的要求,而且购买第方的控件又增加公司的...
    我在几个月前给客户做报表时,客户提出这样一个要求,要在报表生成后在打印前用户还能对表格进行调整,比如人为根据感官调整字体的大小行间距等,当时在网上找了些报表控件看了一下,都不能满足后期调整的要求,而且购买第三方的控件又增加公司的成本,又需对实施人员和用户管理员进行相关的技术培训。最后决定还是用最常用的报表设计工具 Excel 来完成这件事。

    在 Excel 中有一个“XML映射”功能,是把 XML 当成数据源映射到 Excel 中来,我们就可以利用这个功能把我们需要做报表的数据生成成XML然后映射到 Excel  中,让实施人员或用户管理员可以在 Excel 这个熟悉的环境中来进行可视化的报表设计。下边这个“UpdateXmlData”函数就是实现连接到一个数据库并执行一句SQL语句然后用ADO把数据存为XML并用XSLT过滤掉无用信息,返回一个XML的字符串。

     1None.gifPublic Function UpdateXmlData(ByVal vConnect As String, ByVal vSQL As String, Optional ByVal FullData As Boolean = TrueAs String
     2None.gif
     3None.gif    UpdateXmlData = ""
     4None.gif
     5None.gif    If Trim(vSQL) = "" Then
     6None.gif        Err.Raise 1011, Err.Source, "需要执行的 SQL 语句为空,不能执行。"
     7None.gif        Exit Function
     8None.gif    End If
     9None.gif    
    10None.gif    Dim objConnection As New ADODB.Connection
    11None.gif    Dim objRecordset As New ADODB.Recordset
    12None.gif    
    13None.gifOn Error GoTo errConn
    14None.gif    objConnection.Open vConnect
    15None.gifOn Error GoTo errReco
    16None.gif    objRecordset.Open vSQL, objConnection, 11
    17None.gifOn Error GoTo 0
    18None.gif
    19None.gif    Dim objXMLDOM As Object
    20None.gif    Set objXMLDOM = CreateObject("MSXML2.DOMDocument")
    21None.gif    
    22None.gif    objRecordset.Save objXMLDOM, 1
    23None.gif
    24None.gif    Set objRecordset = Nothing
    25None.gif    Set objConnection = Nothing
    26None.gif
    27None.gif    Dim objXMLDOM_XSLT As Object
    28None.gif    Set objXMLDOM_XSLT = CreateObject("MSXML2.DOMDocument")
    29None.gif                   
    30None.gif    'objXMLDOM_XSLT.Load App.Path & "\ReportForms.xsl"
    31None.gif    
    32None.gif    Dim tmpAmount As String
    33None.gif    tmpAmount = ""
    34None.gif    If Not FullData Then
    35None.gif        tmpAmount = "[position() &lt; 3]"
    36None.gif    End If
    37None.gif    
    38None.gif    objXMLDOM_XSLT.loadXML "<?xml version=""1.0""?>" & _
    39None.gif                            "<xsl:stylesheet version=""1.0""" & _
    40None.gif                            " xmlns:xsl=""http://www.w3.org/1999/XSL/Transform""" & _
    41None.gif                            " xmlns:s=""uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882""" & _
    42None.gif                            " xmlns:dt=""uuid:C2F41010-65B3-11d1-A29F-00AA00C14882""" & _
    43None.gif                            " xmlns:rs=""urn:schemas-microsoft-com:rowset""" & _
    44None.gif                            " xmlns:z=""#RowsetSchema"">" & _
    45None.gif                            "<xsl:output omit-xml-declaration=""yes""/>" & _
    46None.gif                            "<xsl:template match=""/"">" & _
    47None.gif                            "<xsl:element name=""数据描述"">" & _
    48None.gif                            "<xsl:for-each select=""/xml/rs:data/z:row" & tmpAmount & """>" & _
    49None.gif                            "<xsl:element name=""列名"">" & _
    50None.gif                            "<xsl:for-each select=""@*"">" & _
    51None.gif                            "<xsl:variable name=""SName"" select = ""name()""></xsl:variable>" & _
    52None.gif                            "<xsl:variable name=""QName"" select = ""/xml/s:Schema/s:ElementType/s:AttributeType[@name=$SName]/@rs:name""></xsl:variable>" & _
    53None.gif                            "<xsl:choose><xsl:when test=""not($QName)"">" & _
    54None.gif                            "<xsl:attribute name=""{name()}""><xsl:value-of select="".""/></xsl:attribute>" & _
    55None.gif                            "</xsl:when><xsl:when test=""$QName"">" & _
    56None.gif                            "<xsl:attribute name=""{$QName}""><xsl:value-of select="".""/></xsl:attribute>" & _
    57None.gif                            "</xsl:when></xsl:choose>" & _
    58None.gif                            "</xsl:for-each></xsl:element></xsl:for-each>" & _
    59None.gif                            "</xsl:element></xsl:template></xsl:stylesheet>"
    60None.gif        
    61None.gif    
    62None.gif    UpdateXmlData = objXMLDOM.transformNode(objXMLDOM_XSLT)
    63None.gif    
    64None.gif    Set objXMLDOM = Nothing
    65None.gif    Set objXMLDOM_XSLT = Nothing
    66None.gif
    67None.gif    Exit Function
    68None.gif    
    69None.giferrConn:
    70None.gif    Err.Raise 1012, Err.Source, "无法连接用“" & vConnect & "”连接到数据库。"
    71None.gif    Exit Function
    72None.giferrReco:
    73None.gif    Err.Raise 1010, Err.Source, "执行的 SQL 语句“" & vSQL & "”时发生错误。"
    74None.gif    Exit Function
    75None.gifEnd Function

    当然更复杂的数据就只有定制写一个程序来生成XML了。

    最后就是根据设计好的报表自动更新数据源生成 Excel 文件了。

     1None.gif
     2None.gif
     3None.gif    Set tmpExcel = CreateObject("Excel.Application")
     4None.gif    Set ExcelWorkbook = tmpExcel.Workbooks.Open("模板文件")
     5None.gif
     6None.gif    ExcelWorkbook.Application.DisplayAlerts = False
     7None.gif    
     8None.gif    Dim tmpXmlValue As String
     9None.gif
    10None.gif    '***************************************
    11None.gif    '在 tmpXmlValue 变量中存入最新的 XML 数据。
    12None.gif    '***************************************
    13None.gif    
    14None.gif    '把 XML 数据更新到 Excel 中
    15None.gif    ExcelWorkbook.XmlMaps("映射名称").ImportXml tmpXmlValue
    16None.gif    '删除 XML 映射
    17None.gif    ExcelWorkbook.XmlMaps("映射名称").Delete
    18None.gif
    19None.gif    '下边这个循环是把在 Excel 中的所有列表对象都取消掉。
    20None.gif    For i = 1 To ExcelWorkbook.Worksheets.Count
    21None.gif        For j = 1 To ExcelWorkbook.Worksheets(i).ListObjects.Count
    22None.gif            ExcelWorkbook.Worksheets(i).ListObjects(1).Unlist
    23None.gif        Next j
    24None.gif    Next i
    25None.gif
    26None.gif    '存盘
    27None.gif    ExcelWorkbook.SaveAs "新文件名"-4143
    28None.gif
    29None.gif    ExcelWorkbook.Application.DisplayAlerts = True
    30None.gif
    31None.gif

    这样就可以实现可视化的报表设计了,而且生成最终的报表后是一个 Excel 文件,客户也能进行后期调整了。

    上边这些只是主要思路的代码,要实现完整的可视化设计,肯定还有很多其它的细节需要注意,比如支持多个映射、图形报表等。

     

    转载于:https://www.cnblogs.com/Jiong/archive/2007/03/20/681572.html

    展开全文
  • 罗刚君Word精灵 v3.0.rar

    2019-07-13 05:22:16
    在表格中时支持批量转换。 小数转百分比:将带有小数的值转换成百分比形式,支持批量转换。 计算表达式:将表达式转换成计算结果,支持批量转换。 千分位分隔符:对整数大于3位的数值批量添加千分位分隔符。段落...
  • eas供应链dep案例集

    2017-11-18 22:32:39
    销售退货申请单增加三个字段; 2. loadfields()方法增加datachanged事件,实现逻辑计算 " 0.3 单据操作控制修改 EASSCMA1P0028 销售退货申请单增加库位需要和仓库联动 “销售退货单”中维护分录时,系统默认...
  • word使用技巧大全

    热门讨论 2011-03-18 20:37:53
    ★利用不间断空格使两个单词保持同一文字里 14 ★让光标段落间快速移动 14 ★巧用“选择性粘贴”中的“无格式文本” 14 ★快速显示文字格式 14 ★Word中用另类方法复制文本 15 ★去除自动添加的超级链接 15 ...
  • 21.8 将某在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二)...
  • Excel新增工具集

    2011-12-20 09:30:27
    4、筛选各班N名:筛选同一表格每个单位(班级)N名的优秀人员(得分)的数据,删除其余人员的数据。 5、英语单词与解释分类:可以将中小学英语单词按照有几个连续字母相同来分类,例如可以将单词中含4个...
  • 修改高级表格支持库在表格空白处(所有单元格之外)单击鼠标导致当前光标处单元格自动进入编辑状态的BUG。 14. 修改扩展界面支持库一,为“超级列表框”增加“检查框状态被改变”事件。 15. 修改扩展界面支持库一...
  • 其实前面介绍图片显示、图片链接的时候为了清晰就是放在在表格中显示的。 图片 描述 百度 表情 Github的Markdown语法支持添加emoji表情,输入不同的符号码(两个冒号包围的字符)可以显示出不同的表情。...
  • 其实前面介绍图片显示、图片链接的时候为了清晰就是放在在表格中显示的。 图片 描述 百度 表情 Github的Markdown语法支持添加emoji表情,输入不同的符号码(两个冒号包围的字符)可以显示出不同的表情。...
  • 表格编号的作法与图相同,唯一不同的是表格的题注在表格上方,且要求左对齐。 公式的编号略有不同,插入公式后,将公式单独放在一个段落,版式为“嵌入式”(Word默认),光标放在公式之后,不要(注意是“不要”...
  • 为保证安装正确,请安装SQL Server2000仔细阅读安装文档 操作方法:[程序]->[电子档案编制系统]->[安装使用说明书] 《电子档案编制系统》本软件可作为任何部门的电子档案编制软件。 软件的主要功能: 1.提供...
  • 易佳工艺软件

    热门讨论 2012-04-11 19:56:57
    增加水平点:增加的点在前一个点的水平方向 增加垂直点:增加的点在前一个点的垂直方向 2009/12/19 10.9.5.6 1. 记号线可以单独定义密度,选择一个记号线,然后点密度,可以添加这条记号线上的密度。 这样,可以...
  • 2、软件退出前增加备份数据的是提示 3、数据导入,备份数据,恢复数据等功能增加进度提示 -------------------------------------------------------------------------------- 7.1版改进 1、窄打印的打印格式...
  • 譬如有1、2、3三行数据, 这里只选中了第三行, 限制为1, 那么如果点击发送, 则clients = [(row, [client1]], 此时clients[2] 就会溢出. 所以这里讲clients修改为字典, 即通过row来索引客户端client = {3: [client1]...
  • Excel技巧大全

    2015-05-06 07:21:37
    27. Excel中快速插入Word表格 22 28. 设置单元格字体 22 29. 一个单元格中显示多行文字 23 30. 将网页上的数据引入到Excel表格 23 31. 取消超级链接 23 32. 编辑单元格内容 23 33. 设置单元格边框 23 34. 设置...
  • 27. EXCEL中快速插入WORD表格 22 28. 设置单元格字体 22 29. 一个单元格中显示多行文字 23 30. 将网页上的数据引入到EXCEL表格 23 31. 取消超级链接 23 32. 编辑单元格内容 23 33. 设置单元格边框 23 34. 设置...
  • 71. EXCEL中快速插入WORD表格 42 72. 设置单元格字体 43 73. 一个单元格中显示多行文字 43 74. 将网页上的数据引入到EXCEL表格 43 75. 取消超级链接 44 76. 编辑单元格内容 44 77. 设置单元格边框 45 78. 设置...
  • GSP5.exe

    2020-04-01 09:16:40
    变化图形,增加表格项的方法有3种:选中表格菜单中“加项”命令;选中表格利用CtrL+E快捷键;双击表格。 变换 “变换”包括平移、旋转、缩放、反射等命令。各标记命令允许指定决定变换的几何对象、几何关系,或度量...
  • 可以在表格内自由画线和擦线,加入表题和表体,表体内可以灌入各种数据库数据,表格可自动填充数据,表格数据可以生成直观醒目的图表,如折线图或圆饼图。表内数据计算有 10多种运算公式,您甚至可以用自定义算式...
  • Report machine 2.4

    2006-03-16 00:00:00
    、最新增加GridView,类似于电子表格,非常非常适合制作复杂报表 最新更新和问题解答请访问论坛:www.pcjingning.com 最后更新 -------- 新版本:2002/05/25更新,欢迎下载(有免费版下载) --Form...

空空如也

空空如也

1 2 3 4
收藏数 77
精华内容 30
关键字:

在表格前增加三行