<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>demo</title>
<style>
TD,INPUT{font-size:12;}
</style>
</head>
<body bgcolor=EEEEEE>
<form name="frm" action="about:结果页面" method=post >
<h4 align=center>demo</h4>
<table align="center" bordercolor=cccccc border=1 width=100% >
<tr>
<td width=500>
</td>
<td align=right>
<input type="button" value="增加" class="bottom" onclick="addDetailProcess();">
<input type="button" value="删除" class="bottom" onclick="delDetailProcess();">
<input type="button" value="完成" class="bottom" onclick="submitProcess();">
</td>
</tr>
</table>
<div width=100% id=thedetailtableDIV>
<table align="center" bordercolor=cccccc border=1 width=100% >
<tr bgcolor=eeeeee id="trDetailTitles">
<td ><input type=checkbox onclick="selectallcheckbox(this)"></td>
<td >明细ID*</td>
<td >明细NAME</td>
</tr>
<tbody id="tbDetailUsed" >
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>
<tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
</tbody>
</table>
</div>
</form>
<!--复制的内容-->
<table id="tbDetailPrepare" style="display:none">
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>
</table>
<input name="theHistoryRecord" type=hidden value="">
</body>
</html>
<script language=javascript>
window.onload = historyOncemore;
window.onbeforeunload = fixHistory;
function fixHistory()//记住历史
{
document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");
}
function historyOncemore()//恢复历史
{
if (document.all("theHistoryRecord").value!="")
{document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
}
}
function selectallcheckbox(obj)//全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbDetailUsed.rows;
for(var i=0;i<theDetail.length-1;i++)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}
function addDetailProcess(afterRowIndex)//增加明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
var theFirstSelectedDetail;
if (afterRowIndex==null)
{
theFirstSelectedDetail=alltbDetailUsed.length-2;
}
else theFirstSelectedDetail=afterRowIndex;
var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
desRow.parentElement.insertBefore(newRow,desRow );
}
function delDetailProcess()//删除明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=0;i<alltbDetailUsed.length-1;i++)
{
if (alltbDetailUsed[i].all("record_select").checked==true)
{
document.all("tbDetailUsed").deleteRow(i);
i=i-1;
}
}
}
function submitProcess()
{
document.frm.submit();
}
</script>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/dickwin/archive/2006/02/23/607787.aspx
分享到：
相关推荐
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
当你需要添加一行时，可以通过JavaScript动态创建`<tr>`元素，并将其插入到表格的适当位置。例如，可以使用`document.createElement('tr')`创建新的行元素，然后利用`innerHTML`或`appendChild`方法添加内容和将其...
在小程序开发中，动态添加表格行是一项常见的需求，特别是在数据展示和用户交互中。这个"小程序源码 动态添加表格行.rar"压缩包提供的TableLayoutDemo示例，旨在帮助开发者掌握这一技能。下面我们将详细探讨相关的...
常见的方法是通过JavaScript或jQuery来操作DOM，向表格中添加新的`<tr>`元素，并确保新添加的行样式和功能与现有的表格行保持一致。 #### 利用原生JavaScript实现动态添加行 虽然使用jQuery可以简化DOM操作的过程，...
对于更复杂的场景，比如在表格中添加输入框让用户输入数据，可以使用`<input>`元素，并确保在添加新行时为每个输入框设置适当的`name`属性，以便于后续的数据处理。此外，为了保持良好的用户体验，可能还需要处理...
3. **动态添加列**：在已有的行中插入新的`<td>`元素，这需要考虑到表格的对齐和布局。如果需要保持列宽一致，可能需要用到`colspan`属性。 4. **事件绑定**：为了实现用户交互，如点击添加按钮增加行或列，我们...
首先，动态删除表格行和列是Web应用中增强用户体验的重要特性。在HTML中，表格由`<table>`元素定义，行由`<tr>`元素表示，列则由`<td>`元素定义。为了实现动态删除，我们需要借助JavaScript，通过事件监听（如点击...
5. **动态添加行和删除行**: 这种功能通常通过JavaScript实现，例如，可以添加一个按钮，当点击时，触发一个函数来创建新的表格行，并将其插入到适当的位置。同样，删除行可能涉及选定行后点击删除按钮，触发一个...
标题中的".net动态添加行"指的是在.NET框架中，特别是在ASP.NET环境中，如何在网页上动态地添加表格（如HTML表格或GridView等）的行。这种功能常用于数据输入场景，用户可以一次处理多条记录，提高用户体验，尤其是...
3. **状态维护**：为了保持展开/隐藏的状态，可以给表格行添加一个自定义的CSS类，例如`expanded`。在点击事件处理中，使用`.toggleClass()`方法根据当前类的存在与否来添加或移除这个类，这样可以方便地通过CSS控制...
通过熟练掌握和运用Session及ViewState，开发者可以在C# Web应用程序中实现动态添加表格行和数据的功能，从而提供更丰富的用户交互体验。在实践过程中，不断优化和调整策略，以适应不同的项目需求和性能要求。
在ASP.NET中，动态添加表格通常是通过后端代码（如C#或VB.NET）来实现的。这个实例可能是为了教授开发者如何在运行时根据需要生成表格，而不是在页面设计时静态地编写HTML。这种灵活性对于处理不确定数量的数据或...
用户可能需要在不同页面间切换，并保持他们之前选择的行的状态。 在layui table中，复选框通常用来让用户多选表格中的行，但默认情况下，当用户翻页后，先前选中的复选框状态不会被记住。为了解决这个问题，我们...
在"layui动态添加表格元素删除代码.zip"这个压缩包中，我们可能找到一个示例，展示如何利用layui的API来动态管理表格数据。文件"132686859539546555"可能是包含实际代码的HTML或JS文件，而"使用须知.txt"则可能包含...
接下来，使用jQuery动态地为表格行添加或移除这些类，以实现条纹效果。这可以通过遍历表格的所有行并根据行索引的奇偶性来实现： ```javascript $(document).ready(function() { $("#myTable tr:visible").each...
在本教程中，我们将深入探讨如何通过EXT Grid的插件机制实现动态地在代码中添加或删除表格列，这正是“Ext grid AddRemovecolumn plugin”的核心功能。 首先，让我们理解EXT Grid的基本结构。EXT Grid由多个组件...
本文将详细讲解如何在C#环境下，使用VS2005进行开发，实现GridView动态增加行的功能。 首先，我们需要理解GridView的基本用法。GridView控件能够自动绑定到数据源（如SQL数据库、数组等），并自动生成表格来显示...
4. **删除功能**：为每一行提供删除按钮，点击后弹出确认对话框，确认后调用删除接口，从数据源中移除该行，并更新表格视图。 5. **主表展开**：主表展开功能允许用户查看或操作与主表项相关的子数据。这通常通过...
3. 编写添加行的函数：创建一个函数，用于生成新的`<tr>`元素并插入到表格中。 4. 编写删除行的函数：同样创建一个函数，根据用户的选择或点击事件删除相应的行。 5. 绑定事件：使用`.on()`方法绑定点击事件，当用户...