`
lzkyo
  • 浏览: 466634 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 动态添加删除控件

    博客分类:
  • Web
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script language="javascript">
var i = 0,j = 0;     //行号与列号
var oNewRow  ;    //定义插入行对象
var oNewCell1,oNewCell2;     //定义插入列对象

//添加条件行
function AddRow()
{
i = document.all.MyTable.rows.length;
oNewRow = document.all.MyTable.insertRow(i);
oNewRow.id = j;

//添加第一列
oNewCell1 = document.all.MyTable.rows[i].insertCell(0)
oNewCell1.innerHTML = "<input type='text' id='Value" + j + "'"+" size='14' value=\"\">";

//添加第二列
oNewCell2 = document.all.MyTable.rows[i].insertCell(1)
oNewCell2.innerHTML ="<input type=button name=Del" + j + " value='删除当前行'"+"onClick='DelCurrentRow(" + j + ");'>";
j++;
}

//删除行
function DelCurrentRow(j)
{
with(document.all.MyTable)
{
for (var i=0;i<rows.length;i++)
{
if (rows[i].id == j)
{
deleteRow(i);
}
}
}
}
</script>

<form method="post" action="">
<div style="margin-left:80px;color:red;font-weight:bold;"></div>
<div align="center" class="title-font">
动态添加HTML元素
</div>
<br>
<table style="border:0px;" cellpadding=0 cellspacing=0
     align="center">
<tr>
<td style="border:0px;" width="340"><hr></td>
<td style="border:0px;"><input type=button value="添加" name"addFieldBT" onclick="AddRow();"/></td>
</tr>
</table>
<br><br>
<table style="border:0px;" cellpadding=0 cellspacing=0
   align="center" class="TableBody" id="MyTable" border="0">
</table>
<br><br>
<table style="border:0px;" cellpadding=0 cellspacing=0
   align="center">
  <tr>
   <td align="center" style="border:0px;">
   <input type=button value="提交" name="searchBT" onclick=""/>
   </td>
  </tr>
</table>
<script language="javascript">AddRow()</script>
</form>
</BODY>
</HTML>

 

分享到:
评论

相关推荐

    动态添加HTML控件.zip

    对于删除控件,同样可以通过JavaScript操作DOM,使用`removeChild()`方法删除元素。在ASP.NET中,可以在服务器端通过控件的`Parent`属性找到其父级容器,然后调用`Controls.Remove()`方法来移除。 在实际应用中,...

    javascript按钮添加控件

    这段代码展示了一个网页应用,其中包含一个按钮,当点击该按钮时,会动态地在页面上添加一个新的输入文本框(控件)以及一个删除链接。这涉及到对DOM(文档对象模型)的操作,以及事件处理函数的编写。下面我们将...

    JS动态添加控件

    动态添加控件是JS的一个核心能力,它允许开发者在用户交互过程中或者程序运行时根据需要动态创建或删除HTML元素,从而实现丰富的用户体验。 动态添加控件的基本思路是通过JavaScript的DOM(Document Object Model)...

    easyui 扩展layout的方法,支持动态添加删除块

    ### easyUI扩展Layout方法以支持动态添加与删除区块 #### 概述 easyUI是一款基于jQuery的用户界面库,它提供了丰富的UI组件和强大的布局管理功能。本文将详细介绍如何通过扩展easyUI的`layout`方法来实现动态添加...

    几个经典JavaScript控件

    通过JavaScript,我们可以动态添加、删除选项,改变选中状态,甚至实现多选功能。`jQuery UI` 提供了可自定义的下拉选择器,如`Autocomplete`,能提供搜索建议。 3. **Tab Pane(选项卡)**: - `tabpane` 文件...

    js生成和删除控件.doc

    在JavaScript中,动态生成和删除控件是一项常见的任务,尤其在Web开发中,它能够使用户界面更加灵活和交互性更强。在这个场景中,主要涉及到的技术是DOM(文档对象模型)操作,这是JavaScript与HTML进行交互的关键。...

    动态添加控件,实用。

    JavaScript,作为浏览器端的主要脚本语言,允许开发者在页面加载后或者用户交互时动态地创建、修改或删除HTML元素,这正是动态添加控件的核心所在。这个功能使得网页更加灵活,能够根据用户需求或特定条件生成不同的...

    JavaScript动态生成控件赋事件

    在网页中,我们经常需要动态生成控件并为其赋予事件,这在JavaScript中是一项基本但至关重要的技能。这篇博客文章可能详细阐述了如何通过JavaScript实现这一功能。 动态生成控件通常涉及到DOM(Document Object ...

    javascript 经典tab控件

    4. **动态添加和删除**:为了增加灵活性,控件应支持在运行时添加或删除标签页。这需要编写相应的JavaScript函数来管理DOM结构。 5. **Ajax加载**:如果内容是从服务器动态获取的,我们可以使用Ajax技术异步加载,...

    动态添加和删除上传图片的方法

    接下来,我们使用JavaScript来实现动态添加和删除文件上传控件的功能。这里主要用到了以下几个关键方法: - `getElementById()`: 用来获取页面中的某个元素。 - `insertAdjacentHTML()`: 用于向目标元素的指定位置...

    jquery动态添加删除(tr/td)

    在介绍jQuery动态添加删除表格行(tr)和单元格(td)的过程中,首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库,它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互,对于Web开发人员来...

    javascript 树形控件

    4. **API设计**:为了方便用户使用,通常会提供一组API,例如添加新节点、删除节点、获取选中节点、折叠/展开指定节点等。 5. **性能优化**:对于大数据量的树形控件,需要注意性能优化,如懒加载技术,只在需要时...

    添加和删除控件1

    为了实现添加和删除控件的功能,我们需要获取到HTML中按钮列表的引用,以及创建一个正则表达式来检查按钮的激活状态。当用户点击按钮时,处理程序会根据按钮是否已激活(即是否带有"btn-success"类)来添加或删除...

    GRID控件删除之前确认

    - `&lt;asp:LinkButton&gt;` 控件被用作删除按钮,通过`OnClientClick`属性设置JavaScript确认框。 - `CommandName`属性指定了当用户点击按钮时触发的事件名称,在这里设置为“Delete”。 - `CommandArgument`属性绑定了...

    js动态添加输入框控件组,类似问卷调查问题以及答案的简单例子。

    本示例中的"js动态添加输入框控件组"就是这样一个应用场景,它展示了如何利用JavaScript来动态生成和管理输入框(input)控件,允许用户添加多组问题和答案。 首先,我们需要理解HTML表单的基础。表单是网页中用于...

    javascript树形结构控件

    JavaScript需要动态地创建、修改和删除DOM元素,以反映树结构的增删改查操作。例如,使用`createElement`创建新的节点,`appendChild`和`removeChild`来管理节点的插入和移除,以及`innerHTML`或`textContent`来更新...

    个人收集4种漂亮的javascript+dhtml动态树控件

    通常,这种控件会提供基本的树形结构,包括添加、删除、展开和折叠节点等功能。它可能适用于简单的数据展示,或者作为更复杂控件的基础。 这些控件都涉及到的技术包括 JavaScript 语言,用于编写前端逻辑;DHTML,...

    javascript动态控制服务器控件实例

    由于ViewState仅跟踪服务器端发生的更改,因此当JavaScript修改了控件的内容时,这些更改不会反映在ViewState中,从而导致无法在服务器端访问由JavaScript添加或修改的项。 为了解决这个问题,可以通过使用隐藏字段...

    动态创建控件的源代码资源

    动态创建控件允许程序员在程序运行时根据需要创建、修改或删除控件,而不是在设计时静态地将它们添加到界面上。这为应用程序提供了更大的灵活性和交互性。下面,我们将深入探讨动态创建控件的概念、原理以及在不同...

    asp.net客户端动态生成控件

    在ASP.NET开发中,动态生成控件是一种常见的技术,它允许开发者在运行时根据需要创建、修改或删除页面上的用户界面元素。这种技术对于构建高度交互性和灵活性的应用程序尤其有用,比如在线表单、购物车或者任何需要...

Global site tag (gtag.js) - Google Analytics