`

JS行动态插入表格

阅读更多
<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_'>&nbsp;万元</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>&nbsp;<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_'>&nbsp;万元</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>&nbsp;<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">&nbsp;<INPUT onClick="return Add();" type="button" value="添加"></td>
              </tr>
</table>

 

分享到:
评论

相关推荐

    js页面插入html表格

    在JavaScript中动态插入HTML表格是一种常见的操作,尤其在创建数据展示或者交互式用户界面时非常有用。本篇文章将深入探讨如何在JavaScript中插入带有变量的HTML表格,以及如何通用地表达这一过程。 首先,我们需要...

    JS操作Word生成表格

    在IT行业中,JavaScript(简称JS)通常用于网页前端交互,但通过特定的库和API,我们也能使用JS来操作Microsoft Word文档,包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能,以及相关的...

    js 表格编辑 插入行 删除行 编辑数据

    js 表格编辑 插入行 删除行 编辑数据 将表格内容生产json格式

    xsl解析xml生成表格,表格行动态隐藏与显示

    接下来,我们关注“表格行动态隐藏与显示”。这通常涉及到JavaScript的交互功能。JavaScript可以在用户的浏览器端运行,提供动态的网页效果。我们可以为表格的每一行添加一个点击事件监听器,当用户点击某一行时,...

    js+实现+滚动的表格

    综上所述,"js+实现+滚动的表格"是通过JavaScript和CSS实现的一种增强网页表格用户体验的技术。它不仅使得大量数据的展示更为便捷,还提升了网页的交互性和性能。通过理解和掌握这些知识,开发者能够创建更加高效、...

    js实现对表格的增删查改

    **增加(Add)**: 在表格中添加新行,可以创建一个新的`&lt;tr&gt;`元素,并为其填充`&lt;td&gt;`元素,然后将其插入到表格的适当位置。例如,我们可以使用`insertBefore()`或`appendChild()`方法将新行添加到表格中。 ```...

    js超简洁表格

    3. **创建表格**:使用JavaScript的DOM操作方法(如`createElement`, `appendChild`, `innerHTML`等)来创建和插入表格元素。例如,我们可以创建新的`&lt;tr&gt;`和`&lt;td&gt;`元素,然后根据数据填充内容。 4. **事件监听**:...

    javascript表格操作

    这些函数通常会操作DOM(Document Object Model),即文档对象模型,通过查找特定的表格元素(如`document.all.t`),然后在其内部插入新的`&lt;tr&gt;`或`&lt;td&gt;`元素。 ### 删除行与单元格 与创建新元素相对应,删除表格...

    js table 表格 复杂表格 多维展示 多维表格【idosoft原创】

    经过研究,发布我的复杂表格、多维展示的成果,如图: 下面是源码(copy and paste,run 看效果): 访问链接: http://www.idosoft.com.cn/javatech/11.html

    原生js在线编辑excel表格代码.zip

    【标题】"原生js在线编辑excel表格代码.zip"是一个包含使用纯JavaScript实现的在线Excel表格编辑功能的代码资源。这个代码库可能旨在提供一种无需依赖外部库(如jQuery)或者服务器端处理的方式,让用户在浏览器中...

    JAVASCRIPT自动添加表格

    在提供的压缩包文件“JS操作表格大全”中,可能包含了各种JavaScript操作表格的实例代码,包括但不限于以上所述的添加和删除操作,还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例,将有助于提升你对...

    javascript动态增删表格行

    javascript动态增删表格行

    处理金额js;表格样式js

    表格样式js"涉及到两个关键知识点:金额格式化处理和表格样式的JavaScript实现。 首先,我们来看“处理金额js”。在前端开发中,用户交互的数据往往包括货币金额,而这些金额通常需要进行格式化以便于阅读。`money-...

    js简单表格操作

    在JavaScript(简称JS)中,表格操作是网页动态交互中常见的功能,主要用于处理HTML中的`&lt;table&gt;`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作,帮助你创建更加灵活和交互性强的数据展示界面。 首先...

    JS动态增加删除表格行

    在JavaScript(JS)编程中,动态管理HTML元素是常见的需求,特别是对于表格(Table)这样的数据展示组件。本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一...

    js实现漂亮的table表格

    在前端开发中,JavaScript(JS)和CSS是创建交互式且视觉吸引人的网页元素不可或缺的工具,特别是对于呈现数据的表格。"js实现漂亮的table表格"这个主题涉及到使用JavaScript和CSS来增强HTML表格的功能和外观,使其...

    js css精美表格

    "js css精美表格"的主题涉及到了JavaScript和CSS技术在创建美观、交互性强的表格方面的应用。在这个主题下,我们可以深入探讨以下几个关键知识点: 1. CSS(层叠样式表):CSS是用于控制网页元素样式的重要工具。在...

    js版本电子表格完整版

    【js版本电子表格完整版】是一个基于JavaScript实现的电子表格组件,它允许用户在Web页面上创建、编辑和展示表格数据。这个组件适用于那些需要在线处理表格数据的应用场景,例如数据分析、报表展示或者用户交互式的...

    JavaScript sqlite3 大数据量插入

    Node.js结合sqlite3模块实现Sqlite数据库建表并实现大数据量的快速插入

    javascript 表格列可以拖

    标签"javascript 表格工具 js 列可以伸缩"进一步强调了这个工具的关键特性:它是JavaScript语言开发的,专注于表格功能,并且具有列宽可调整的特性。这通常涉及到事件监听、DOM操作以及可能的响应式设计。 在压缩包...

Global site tag (gtag.js) - Google Analytics