<script language="javascript">
var RowMax=1;
function Add() //添加控件
{
var nRow=document.all.Table1.rows.length; //获得当前TABLE的行数
var objTheRow=document.all.Table1.insertRow(nRow);//执行添加
var objRow1=objTheRow.insertCell(0);
var objRow2=objTheRow.insertCell(1);
var objRow3=objTheRow.insertCell(2);
var objRow4=objTheRow.insertCell(3);
var objRow5=objTheRow.insertCell(4);
objRow1.innerHTML="<input type='text' id='cell1"+nRow+"' name='cell1"+nRow+"' onkeyup=smanPromptList('cell1"+nRow+"') value='基金代码/名称' onfocus=sfFocus('cell1"+nRow+"','"+nRow+"') onblur=sfBlur('cell1"+nRow+"') style='HEIGHT: 22px' size='15' style='border-style: solid; border-width:1;color:#999999'><div id='smanDisp"+nRow+"' style='BORDER-RIGHT:#799bb6 1px solid; BORDER-TOP:#799bb6 1px solid; DISPLAY:none; FONT-SIZE:14px; BACKGROUND:#ebf2f7; BORDER-LEFT:#799bb6 1px solid; CURSOR:default; BORDER-BOTTOM:#799bb6 1px solid; POSITION:absolute' onbulr></div>";
objRow1.align="center";
objRow1.bgcolor="#fefee6";
objRow2.innerHTML="<INPUT type='text' id='cell2"+nRow+"' size='14' style='border-style: solid; border-width:1;COLOR: #999999'><span class='songhei12_'> 万元</span>";
objRow2.align="center";
objRow2.bgcolor="#fefee6";
objRow3.innerHTML="<INPUT type='text' id='cell3"+nRow+"' size='17' style='border-style: solid; border-width:1;' class='Wdate' onFocus='new WdatePicker(this,\"%Y年%M月%D日\",false)'>";
objRow3.align="center";
objRow3.bgcolor="#fefee6";
objRow4.innerHTML="<SELECT id='cell4"+nRow+"'><OPTION selected value='银行'>银行</OPTION><OPTION selected value='证券'>证券</OPTION></SELECT> <INPUT type='text' id='cell5"+nRow+"' size='17' style='border-style: solid; border-width:1;color:#999999' onfocus=\"if(this.value == '请填写具体的银行/证券'){this.value='';}\" onblur=\"if(this.value==''){this.value = '请填写具体的银行/证券';}\" value='请填写具体的银行/证券'>";
objRow4.align="center";
objRow4.bgcolor="#fefee6";
objRow5.innerHTML="<INPUT type='button' value='删除' onclick='return Delete();'>";
objRow5.align="center";
objRow5.bgcolor="#fefee6";
RowMax=RowMax+1;
}
function Delete() //删除控件
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;//获取当前索引
document.all.Table1.deleteRow(currRowIndex);//执行删除
}
</script>
<table id="Table1" cellSpacing="0" cellPadding="0" width="100%" border="0" name="Table1">
<tr>
<td vAlign="middle" align="center" width="15%" bgColor="#fefee6" height="25"><uc1:TxtBox id="TxtBox1" runat="server" Num="0"></uc1:TxtBox></td>
<td vAlign="middle" align="center" width="15%" bgColor="#fefee6" height="25"><INPUT id="cell20" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid;COLOR: #999999"
type="text" size="14"><span class='songhei12_'> 万元</span></td>
<td vAlign="middle" align="center" width="21%" bgColor="#fefee6" height="25"><INPUT class="Wdate" id="cell30" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid"
onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" type="text" size="17"></td>
<TD vAlign="middle" align="center" width="21%" bgColor="#fefee6"><SELECT id="cell40">
<OPTION value="银行">银行</OPTION>
<OPTION selected value="证券">证券</OPTION>
</SELECT> <INPUT id="cell50" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; COLOR: #999999; BORDER-BOTTOM: 1px solid"
type="text" size="17" onFocus="if(this.value == '请填写具体的银行/证券'){this.value='';}" onBlur="if(this.value==''){this.value = '请填写具体的银行/证券';}"
value="请填写具体的银行/证券"></TD>
<td vAlign="middle" align="center" width="15%" bgColor="#fefee6"> <INPUT onClick="return Add();" type="button" value="添加"></td>
</tr>
</table>
分享到:
相关推荐
在JavaScript中动态插入HTML表格是一种常见的操作,尤其在创建数据展示或者交互式用户界面时非常有用。本篇文章将深入探讨如何在JavaScript中插入带有变量的HTML表格,以及如何通用地表达这一过程。 首先,我们需要...
在IT行业中,JavaScript(简称JS)通常用于网页前端交互,但通过特定的库和API,我们也能使用JS来操作Microsoft Word文档,包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能,以及相关的...
js 表格编辑 插入行 删除行 编辑数据 将表格内容生产json格式
接下来,我们关注“表格行动态隐藏与显示”。这通常涉及到JavaScript的交互功能。JavaScript可以在用户的浏览器端运行,提供动态的网页效果。我们可以为表格的每一行添加一个点击事件监听器,当用户点击某一行时,...
综上所述,"js+实现+滚动的表格"是通过JavaScript和CSS实现的一种增强网页表格用户体验的技术。它不仅使得大量数据的展示更为便捷,还提升了网页的交互性和性能。通过理解和掌握这些知识,开发者能够创建更加高效、...
**增加(Add)**: 在表格中添加新行,可以创建一个新的`<tr>`元素,并为其填充`<td>`元素,然后将其插入到表格的适当位置。例如,我们可以使用`insertBefore()`或`appendChild()`方法将新行添加到表格中。 ```...
3. **创建表格**:使用JavaScript的DOM操作方法(如`createElement`, `appendChild`, `innerHTML`等)来创建和插入表格元素。例如,我们可以创建新的`<tr>`和`<td>`元素,然后根据数据填充内容。 4. **事件监听**:...
这些函数通常会操作DOM(Document Object Model),即文档对象模型,通过查找特定的表格元素(如`document.all.t`),然后在其内部插入新的`<tr>`或`<td>`元素。 ### 删除行与单元格 与创建新元素相对应,删除表格...
经过研究,发布我的复杂表格、多维展示的成果,如图: 下面是源码(copy and paste,run 看效果): 访问链接: http://www.idosoft.com.cn/javatech/11.html
【标题】"原生js在线编辑excel表格代码.zip"是一个包含使用纯JavaScript实现的在线Excel表格编辑功能的代码资源。这个代码库可能旨在提供一种无需依赖外部库(如jQuery)或者服务器端处理的方式,让用户在浏览器中...
在提供的压缩包文件“JS操作表格大全”中,可能包含了各种JavaScript操作表格的实例代码,包括但不限于以上所述的添加和删除操作,还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例,将有助于提升你对...
javascript动态增删表格行
表格样式js"涉及到两个关键知识点:金额格式化处理和表格样式的JavaScript实现。 首先,我们来看“处理金额js”。在前端开发中,用户交互的数据往往包括货币金额,而这些金额通常需要进行格式化以便于阅读。`money-...
在JavaScript(简称JS)中,表格操作是网页动态交互中常见的功能,主要用于处理HTML中的`<table>`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作,帮助你创建更加灵活和交互性强的数据展示界面。 首先...
在JavaScript(JS)编程中,动态管理HTML元素是常见的需求,特别是对于表格(Table)这样的数据展示组件。本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一...
在前端开发中,JavaScript(JS)和CSS是创建交互式且视觉吸引人的网页元素不可或缺的工具,特别是对于呈现数据的表格。"js实现漂亮的table表格"这个主题涉及到使用JavaScript和CSS来增强HTML表格的功能和外观,使其...
"js css精美表格"的主题涉及到了JavaScript和CSS技术在创建美观、交互性强的表格方面的应用。在这个主题下,我们可以深入探讨以下几个关键知识点: 1. CSS(层叠样式表):CSS是用于控制网页元素样式的重要工具。在...
【js版本电子表格完整版】是一个基于JavaScript实现的电子表格组件,它允许用户在Web页面上创建、编辑和展示表格数据。这个组件适用于那些需要在线处理表格数据的应用场景,例如数据分析、报表展示或者用户交互式的...
Node.js结合sqlite3模块实现Sqlite数据库建表并实现大数据量的快速插入
标签"javascript 表格工具 js 列可以伸缩"进一步强调了这个工具的关键特性:它是JavaScript语言开发的,专注于表格功能,并且具有列宽可调整的特性。这通常涉及到事件监听、DOM操作以及可能的响应式设计。 在压缩包...