<!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>
分享到：
相关推荐
js 操作表格动态添加和删除行
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...
这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
这个"vue.js动态表格增加删除修改代码.zip"文件显然包含了使用Vue.js实现动态表格功能的示例代码。动态表格是网页应用中常见的一种数据展示方式，它允许用户交互地添加、删除和修改数据。 首先，`index.html`文件是...
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></td> 添加行 ...
动态添加js,动态添加表格和删除表格,批量添加记录，批量添加
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`...
用JavaScript制作的动态表格，有添加、删除、全选、全不选，有对动态新增的域校验问题，有对新增的域设置readonly问题，还有对新增域中的span进行隐藏问题都有解决，还有对动态表格的讲解PPT一份。
这篇博客"JS对表格的动态增加删除行 (多个demo)"提供了实用的方法来帮助开发者实现这些功能。以下是对这个主题的详细说明： 1. **HTML表格基础**： HTML表格由`<table>`元素定义，行`<tr>`，列`<td>`（或`<th>`...
在JavaScript（JS）中，创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求，尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先，我们需要在HTML中创建一个...
在IT领域，尤其是在网页开发和用户界面设计中，动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列，提高了交互性和用户体验。本篇将深入探讨这一主题，主要关注如何实现这个...
4. **动态交互**：为了使用户体验更好，可以添加更多的交互功能，比如禁用删除按钮，或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**：在处理大量数据时，应...
js实现动态增加和删除表格的行和列。实例 js实现动态增加和删除表格的行和列。实例
这篇博文"表格行记录动态增加和删除"主要探讨了如何在网页应用中实现这一功能，这通常是通过JavaScript、jQuery或者更现代的前端框架如Vue.js、React.js来完成的。下面将详细讲解这一知识点。 首先，我们要理解表格...