电力项目十七--数据字典首页JS添加和删除表格
知识点:jQuery是一个JavaScript函数库。
JS代码:
function insertRows(){
//获取表格对象
var tb1 = $("#dictTbl");
var tempRow = $("#dictTbl tr").size();//获取表格的行数
var $tdNum = $("<td align='center'></td>");
$tdNum.html(tempRow); var $tdName = $("<td align='center'></td>");
$tdName.html("<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>"); var $tdDel = $("<td align='center'></td>");
$tdDel.html("<a href='javascript:delTableRow(\""+tempRow+"\")'><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>"); // 创建tr,将3个td放置到tr中
var $tr = $("<tr></tr>");
$tr.append($tdNum);
$tr.append($tdName);
$tr.append($tdDel);
//在表格的最后追加新增的tr
tb1.append($tr);
}
删除改变行号:
function delTableRow(rowNum){
//改变行号和删除的行号
var tb1 = $("#dictTbl");
var tempRow = $("#dictTbl tr").size();//获取表格的行数
if (tempRow >rowNum){
//获取删除行的id指定的对象,例如:<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>
$("#"+rowNum).parent().parent().remove();
//加1表示寻找下一个id,目的是将后面tr的格式向上移动
for (i=(parseInt(rowNum)+);i<tempRow;i++){
//将i-1的值赋值给编号
$("#"+i).parent().prev().html(i-);
//将i-1的值赋值给超链接的删除
$("#"+i).parent().next().html("<a href='javascript:delTableRow(\""+(i-)+"\")'><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>");//
//将i-1的值赋值给文本框的id,用于删除
$("#"+i).attr("id",(i-));//将id设置成i-1
}
}
}
JSP代码:
<table cellspacing="" cellpadding="" rules="all" bordercolor="gray" border="" id="dictTbl"
style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word"> <tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3">
<td class="ta_01" align="center" width="20%" height= background="${pageContext.request.contextPath }/images/tablehead.jpg">编号</td>
<td class="ta_01" align="center" width="60%" height= background="${pageContext.request.contextPath }/images/tablehead.jpg">名称</td>
<td class="ta_01" align="center" width="20%" height= background="${pageContext.request.contextPath }/images/tablehead.jpg">删除</td>
</tr> <tr>
<td class="ta_01" align="center" width="20%"></td>
<td class="ta_01" align="center" width="60%">
<input name="itemname" type="text" size="" maxlength=""></td>
<td class="ta_01" align="center" width="20%"></td>
</tr> </table>
在使用<table>标签实现表格添加行和删除行的时候,后台获取页面填写的值,此时是一个String类型的数组对象,可以采用遍历数组的方式,保存数据。
电力项目十七--数据字典首页JS添加和删除表格的更多相关文章
- JS添加和删除表格行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
- 用JS添加和删除class类名
下面介绍一下如何给一个节点添加和删除class名 添加:节点.classList.add("类名"): 删除:节点.classList.remove("类名") ...
- JS添加或删除HTML dom元素的方法实例分析
本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- 利用jquery动态添加和删除表格的一行,并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- SSH电力项目四-显示首页
1.登录页面: 将上一节中的页面放到/WEB-INF/page/目录下,需要登录后才能访问该页面: 对应页面:/WEB-INF/page/menu/home.jsp <%@ page langu ...
- ligerui_实际项目_003:form中添加数据,表格(grid)里面显示,最后将表格(grid)里的数据提交到servlet
实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...
- 04-THREE.JS 添加、删除物体,批量操作
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- js添加确认删除操作注意事项
function delsure(){ if(confirm('确认删除吗?')){ return true;//点击确定则返回这里的内容 }else{ return false; } } 在表单中添 ...
随机推荐
- 在Linux环境下mysql的root密码忘记解决方法
MySQL密码的恢复方法之一 .首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下 ...
- R语言设置write.table()输出的文件格式
write.table(),是保存数据为文件的函数. > xiaohuqingdan <- c(3900088702, 3900072499,3900021029) > xiaohu ...
- 'cl.exe' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
1.首先找到vcvars32.bat文件,一般在C:\\Program Files (x86)\\Microsoft Visual Studio 12.0\\VC\\bin文件夹下 2.打开cmd黑窗 ...
- Hibernate一级缓存、二级缓存以及查询缓存的关系
转载自http://blog.csdn.net/maoyeqiu/article/details/50209893 前两天总结了一下二级缓存和查询缓存的关系,但是又有一个新的问题,就是查询缓存缓存到二 ...
- vector、map删除当前记录
map<string, string> sMap; map<string, string>::iterator iter; for(iter = sMap.begin();it ...
- H264裸流分析中,能获取哪些信息?
从H264的裸流中,PPS,SPS中,一定可以获取到的,有图像的宽,高信息. 这部分信息的提取,用Stream eye 分析: 这里需要特别提一下这两个参数: pic_width_in_mbs_mi ...
- jquery load ($.load) 事件用法与分析(转)
首先我们需要清楚的是jquery load方法是对jQuery.ajax()进行封装以方便我们使用的一个方法,当我们需要处理较为复杂的逻辑时候,还是需要用到jQuery.ajax()这个比较全面的方法 ...
- UIView的几个枚举定义
UIView是iOS开发最主要的视图,非常多控件都是继承它,掌握当中的几个基本枚举定义,有利益理解视图的载入和參数差别. 一.UIViewAnimationCurve UIView的基本动画变化规律 ...
- CentOS6.8设置开机直接进入命令行模式
在linux图形界面中,按 “Alt+Ctrl+F1”,进入命令行界面. 切换到root用户 # vi /etc/inittab 找到下面的语句: # Default runlevel. The ru ...
- Tomcat源码学习
Tomcat源码学习(一) 转自:http://carllgc.blog.ccidnet.com/blog-htm-do-showone-uid-4092-type-blog-itemid-26309 ...