`

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操作Word生成表格

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

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

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

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    js实现对表格的增删查改

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

    js表格无缝滚动效果

    为了提供更好的用户体验,可以采用JavaScript(js)来实现表格的无缝滚动效果,让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用,它能让用户更容易地浏览和查找信息。 首先,...

    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 实现 用JavaScript隐藏或显示表格列

    js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!

    js转换图片到Excel 里面

    在IT行业中,JavaScript(简称JS)是一种广泛使用的前端编程语言,它不仅限于网页交互,还可以处理各种数据格式,包括创建和操作Excel文件。在标题"js转换图片到Excel里面"和描述中提到的任务,是利用JavaScript将...

    处理金额js;表格样式js

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

    JS动态增加删除表格行

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

    js css精美表格

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

    JavaScript仿Excel表格演示

    1. **动态添加行**:在JavaScript中,可以通过DOM操作动态地创建新的表格行(`&lt;tr&gt;`元素)并插入到表格中。用户可以点击“添加行”按钮,触发一个JavaScript函数,该函数将生成新的行结构,填充默认数据,然后将其...

    js实现漂亮的table表格

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

    JS实现的表格行上下移动操作示例

    本篇文章通过一个简单的实例,展示了如何使用JavaScript实现表格行上下移动的操作,涉及到了对页面元素节点及属性的操作技巧。 首先,我们来看一个简单的表格示例,它包含了几个表格行(`&lt;tr&gt;`)和单元格(`&lt;td&gt;`)...

    Js_CSS实现多色表格

    标题“Js_CSS实现多色表格”表明我们即将探讨如何使用JavaScript和CSS技术来创建具有不同颜色样式的表格。在网页开发中,表格是组织数据的一种常见方式,而通过JavaScript和CSS,我们可以为表格添加交互性以及更丰富...

    JS树形表格(可分级展开)

    otreetable.js 原生JS树形表格,调用非常简单(只需一句代码即可调用),获取HTML中输出的表格数据重构表格,以树形方式显示,可展开/收缩,不破坏表格原有数据格式及内容,支持无限级,兼容所有浏览器。当前版本...

    JavaScript 使用ActiveX实现在Excel文件中插入图片

    JavaScript 使用ActiveX实现在Excel文件中插入图片

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

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

    动态Javascript表格实例

    例如,要添加新行,你可以创建一个新的`&lt;tr&gt;`元素,并通过`innerHTML`属性设置其内容,然后将其插入到表格的`&lt;tbody&gt;`元素中。以下是一个简单的例子: ```javascript var table = document.getElementById('...

Global site tag (gtag.js) - Google Analytics