lucene321
- 浏览: 178836 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (140)
- java (138)
- 佳能500d (1)
- 佳能 (1)
- Oracle数据库文档构造器--Oraschemadoc (1)
- EJB调用的原理分析 (1)
- 使用css3画"静音"icon (1)
- 张小庆，在路上（16）-给弟弟找工作 (1)
- Android短信编解码方式 (1)
- lua web 开发 (1)
- zk安装 (1)
- 菜单多国语言化遇到的问题 (1)
- 【转】纯文本配置还是注册表 (1)
- C++ delete删除动态分配的内存 (1)
- eclipse下修改项目名导致tomcat内发布名不一致的解决方法 (1)
- Lucene实现各种常见文档的全文检索 (1)
- 项目风险之人员流动风险 (1)
- 时空数据模型简介 (1)
- XSLT学习笔记 (1)
- 依然是计划 如果没有计划似乎就没有了动力 (1)
- How to Succeed in A Professional Career (1)
- 编程环境应该和讨论社区完美的进行结合 (1)
- C#坦克大战实现 (1)
- 电脑用户密码忘记了怎么办? (1)
- java.lang.NoClassDefFoundError: org/dom4j/DocumentException (1)
- 关于成立北京Android爱好者俱乐部的声明 (1)
- Android开发之初探音频的播放 (1)
- Struts标签循环List (1)
- CAP原理 (1)
- javabean的自动生成 (1)
- 打开CMD一闪就关的解决方案 (1)
- 我是项目经理，我的项目管理日记【20111202】 (1)
- Html5游戏开发入门笔记--<躲砖块> (1)
- mysql中查看和设置系统字符编码 (1)
- PhoneGap-Accelerometer (1)
- [Jetty]Jetty工作原理 (1)
- Ibatis+Spring整合实例Demo+源码 (1)
最新评论
-
u012985907：
dsdsdsdsd
FLASH上传与拍照 -头像-avatart -
a379933101：
？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
android listview 连续调用 getview问题分析及解决 -
151tmac：
拜托下次粘贴的时候，粘贴为纯文本
android listview 连续调用 getview问题分析及解决 -
liudezhong135：
...
Spring3MVC 在JSP中使用@ModelAttribute -
香飘飘2011：
要是不知道层次级别，如何退回到根目录呢
FTP退回到根目录
java代码
<html>
<head>
<title>表格插入行与删除行示例</title>
<script type="text/javascript">
//参数列表[表格id,复制行的索引,标题行数,表单id]
function clickinsert(inputtable,rowid,titlerow,inputform){
var oform=document.getelementbyid(inputform);
var otable=document.getelementbyid(inputtable);
var obj =window.event.srcelement;
var otd = obj.parentelement;
var otr = otd.parentelement;
var orow = otr.rowindex;
var otr1 = otable.insertrow(orow+1);
var ocells = otr.cells;
for(i=0;i<ocells.length;i++){
var cell = ocells[i].innerhtml;
var cell1 = otr1.insertcell(i);
cell1.innerhtml=cell;
}
oform.flag[orow+1-titlerow].value="1";
//alert(oform.flag[orow+1-titlerow].value="1");
}
//参数列表[表格id,标题行数,表单id]
function clickdelete(inputtable,titlerow,inputform){
var oform=document.getelementbyid(inputform);
var otable=document.getelementbyid(inputtable);
var obj =window.event.srcelement;
var otd = obj.parentelement;
var otr = otd.parentelement;
var orow = otr.rowindex;
otr.style.display="none";
oform.flag[orow-titlerow].value="2";
// alert(oform.flag[orow-titlerow].value);
}
function submitform(){
var flags= inputform.flag;
for(i=0;i<flags.length;i++){
alert(flags[i].value);
}
}
</script>
</head>
<body>
<form action="" name="inputform" id="inputform">
<table id="inputtable" width="50%" align="center" border="1" cellpadding="0"
cellspacing="0">
<tr>
<td>
学生
</td>
<td>
课程
</td>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
<tr style="display: none;">
<td>
<input type="hidden" name="flag" id="flag" value="-1" />
<select id="studentid">
<option value="01">
张三
</option>
<option value="02">
李四
</option>
</select>
</td>
<td>
<select id="courseid">
<option value="01">
英语
</option>
<option value="02">
数学
</option>
</select>
</td>
<td>
<input type="button" name="insertbutton" value="新增" />
</td>
<td>
<input type="button" name="deletebutton" value="删除" />
</td>
</tr>
<tr>
<td>
<input type="hidden" name="flag" id="flag" value="1" />
<select id="studentid">
<option value="01">
张三
</option>
<option value="02">
李四
</option>
</select>
</td>
<td>
<select id="courseid">
<option value="01">
英语
</option>
<option value="02">
数学
</option>
</select>
</td>
<td>
<input type="button" name="insertbutton" value="新增"
onclick="clickinsert('inputtable',1,1,'inputform')" />
</td>
<td>
<input type="button" name="deletebutton" value="删除"
onclick="clickdelete('inputtable',1,'inputform')" />
</td>
</tr>
</table>
<br />
<center><input type="button" name="submitbutton" value="提交" onclick="submitform()" /></center>
</form>
</body>
</html>
<html>
<head>
<title>表格插入行与删除行示例</title>
<script type="text/javascript">
//参数列表[表格id,复制行的索引,标题行数,表单id]
function clickinsert(inputtable,rowid,titlerow,inputform){
var oform=document.getelementbyid(inputform);
var otable=document.getelementbyid(inputtable);
var obj =window.event.srcelement;
var otd = obj.parentelement;
var otr = otd.parentelement;
var orow = otr.rowindex;
var otr1 = otable.insertrow(orow+1);
var ocells = otr.cells;
for(i=0;i<ocells.length;i++){
var cell = ocells[i].innerhtml;
var cell1 = otr1.insertcell(i);
cell1.innerhtml=cell;
}
oform.flag[orow+1-titlerow].value="1";
//alert(oform.flag[orow+1-titlerow].value="1");
}
//参数列表[表格id,标题行数,表单id]
function clickdelete(inputtable,titlerow,inputform){
var oform=document.getelementbyid(inputform);
var otable=document.getelementbyid(inputtable);
var obj =window.event.srcelement;
var otd = obj.parentelement;
var otr = otd.parentelement;
var orow = otr.rowindex;
otr.style.display="none";
oform.flag[orow-titlerow].value="2";
// alert(oform.flag[orow-titlerow].value);
}
function submitform(){
var flags= inputform.flag;
for(i=0;i<flags.length;i++){
alert(flags[i].value);
}
}
</script>
</head>
<body>
<form action="" name="inputform" id="inputform">
<table id="inputtable" width="50%" align="center" border="1" cellpadding="0"
cellspacing="0">
<tr>
<td>
学生
</td>
<td>
课程
</td>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
<tr style="display: none;">
<td>
<input type="hidden" name="flag" id="flag" value="-1" />
<select id="studentid">
<option value="01">
张三
</option>
<option value="02">
李四
</option>
</select>
</td>
<td>
<select id="courseid">
<option value="01">
英语
</option>
<option value="02">
数学
</option>
</select>
</td>
<td>
<input type="button" name="insertbutton" value="新增" />
</td>
<td>
<input type="button" name="deletebutton" value="删除" />
</td>
</tr>
<tr>
<td>
<input type="hidden" name="flag" id="flag" value="1" />
<select id="studentid">
<option value="01">
张三
</option>
<option value="02">
李四
</option>
</select>
</td>
<td>
<select id="courseid">
<option value="01">
英语
</option>
<option value="02">
数学
</option>
</select>
</td>
<td>
<input type="button" name="insertbutton" value="新增"
onclick="clickinsert('inputtable',1,1,'inputform')" />
</td>
<td>
<input type="button" name="deletebutton" value="删除"
onclick="clickdelete('inputtable',1,'inputform')" />
</td>
</tr>
</table>
<br />
<center><input type="button" name="submitbutton" value="提交" onclick="submitform()" /></center>
</form>
</body>
</html>
0
顶
顶
6
踩
踩
分享到：
发表评论
-
Ibatis+Spring整合实例Demo+源码
2012-02-08 12:58 1429<span style="color: ... -
[Jetty]Jetty工作原理
2012-02-07 17:29 1011http://www.ibm.com/develo ... -
PhoneGap-Accelerometer
2012-02-07 14:23 1228采集设备在x、y、z方向上的动作。 acce ... -
mysql中查看和设置系统字符编码
2012-02-04 14:28 1732--查看数据库的字符集 show variables ... -
Html5游戏开发入门笔记--<躲砖块>
2012-02-03 12:04 1186学习了html5中的canvas画布元素，自己写了一个 ... -
我是项目经理，我的项目管理日记【20111202】
2012-02-03 10:19 1018其实前段时间项目 ... -
打开CMD一闪就关的解决方案
2012-02-02 12:14 1419转：http://blog.163.com/cumt_ ... -
javabean的自动生成
2012-02-02 11:59 1432在jcreator pro中自动生成 在j ... -
CAP原理
2012-02-01 09:00 1180作者：NinGoo 原文链接：ht ... -
Struts标签循环List
2012-01-31 14:18 986<pre name="code&quo ... -
Android开发之初探音频的播放
2012-01-11 16:29 1137<h1>Android开发之初探音频的播放 ... -
关于成立北京Android爱好者俱乐部的声明
2012-01-11 14:33 887<blockquote dir="lt ... -
java.lang.NoClassDefFoundError: org/dom4j/DocumentException
2011-12-28 13:03 15156<span style="font-f ... -
电脑用户密码忘记了怎么办?
2011-12-28 12:14 1008<span style="fon ... -
C#坦克大战实现
2011-12-20 13:29 1147记得在大学学java ... -
编程环境应该和讨论社区完美的进行结合
2011-12-19 11:54 787在学习.NET过程中，经常会遇到很多问题，有的时候会找 ... -
How to Succeed in A Professional Career
2011-12-19 10:29 766(From Microsoft)<br>& ... -
依然是计划 如果没有计划似乎就没有了动力
2011-12-15 10:39 900</span></span>& ... -
XSLT学习笔记
2011-12-14 14:04 692<p class="MsoNorma ... -
时空数据模型简介
2011-12-14 13:59 1512<p class="MsoNo ...
相关推荐
此外，还可以扩展这个功能，比如添加验证、编辑和删除行的功能，或者使用AJAX从服务器获取数据并动态插入。这需要更深入地理解DOM操作和JavaScript事件处理。 总结来说，"表格动态插入行"是JavaScript在网页开发中...
本文将通过一个具体的示例来讲解如何使用JavaScript实现动态插入和删除表格行的功能。 #### 一、核心概念与原理 1. **DOM (Document Object Model)**：DOM 是一种标准，用于表示 HTML 和 XML 文档的结构。它定义了...
这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容，但我们可以根据这个主题进行深入的讨论。 首先，我们要理解表格（Table）在HTML中的基本结构。...
本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例，演示了如何在Layui表格中实现动态的行添加、编辑和删除功能，并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...
以下是一个简单的例子，展示如何使用JavaScript添加和删除表格行： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...
本主题聚焦于一款能够实现类似Excel功能的前端表格工具，它允许用户进行编辑、合并单元格、删除和插入行等操作，极大地提高了数据管理和交互的便利性。下面将详细探讨这款表格组件的关键特性和实现技术。 首先，该...
`DragEnter`和`DragOver`事件处理拖放过程中行的插入和删除，确保行在正确的位置上。 此外，我们还需要在`MainForm_Load`事件中禁用自动调整行高度的功能，因为这可能会影响行拖动的视觉效果： ```csharp private ...
本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...
在IT行业中，尤其是在Web开发领域，表格是一种常用的数据展示方式，用户经常需要对表格中的行进行动态添加或删除操作。这篇博文"表格行记录动态增加和删除"主要探讨了如何在网页应用中实现这一功能，这通常是通过...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
动态添加和删除行通常涉及向现有表格动态插入或移除这些元素。 1. **动态添加行**： - 使用jQuery，可以获取表格引用，例如`$("#myTable")`，其中`#myTable`是表格的ID。 - 创建新的`<tr>`元素，可以使用`$('<tr>...
本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
总结来说，这个示例演示了如何利用jQuery在JavaScript中动态地操作HTML表格，包括添加新行（通过创建`<tr>`和`<td>`元素并添加到表格中）以及删除行（通过选择器选取并移除特定行）。这些基本操作在构建交互式Web...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
删除行功能通常与表格行关联一个删除按钮，当用户点击该按钮时，触发对应的事件处理函数。处理函数获取到被选中的行，然后使用Layui的API或DOM操作将其从表格中移除。可能的API如`table.del`或直接删除DOM元素。 4...
通过以上解析，我们可以看出，该示例代码主要利用了JavaScript的DOM操作能力，结合HTML结构，实现了动态添加、删除以及调整表格行位置的功能。这种技术广泛应用于表单动态构建、数据编辑等场景，极大地提高了Web应用...
总结来说，这个示例展示了如何使用JavaScript在前端动态添加表格行，以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术（如IE6和ASP），但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...
在这个例子中，DOM操作用于动态地向表格中插入新的行（`insertRow`）和单元格（`insertCell`）。 2. 表格操作：表格是HTML中表示表格数据的结构，由`<table>`、`<tr>`（表格行）、`<td>`（表格数据单元格）或`<th>`...