效果如下：
<script type="text/javascript">
function AddTR(){
//取得新增行数的ID值
var idval = document.getElementById("idval").value;
var table = document.getElementById("mytable"); //取得表格对象
//取得表格的行数
var index = table.rows.length;
var nextRow = table.insertRow(index);//取得表格的行对象
nextRow.setAttribute("id",idval);//设置td的属性
var firstTD = nextRow.insertCell();//取得添加行第一个列对象
firstTD.setAttribute("height","20px");//设置高度属性值
firstTD.innerHTML=idval;
var secondTD = nextRow.insertCell(); //取得添加行第二个列对象
secondTD.innerHTML="第"+idval+"行";
var thirdTD = nextRow.insertCell(); //取得添加行第三个列对象
thirdTD.setAttribute("align","center");
thirdTD.innerHTML=
"<a href='#' onclick='deleteTR("+idval+")'>删除</a>";
idval++;
document.getElementById("idval").value=idval;
}
function deleteTR(id){
var table = document.getElementById("mytable");//取得表格对象
var row = document.getElementById(id); //取得行对象
var index = row.rowIndex;//取得行数的索引值
table.deleteRow(index);
//删除指定行
}
</script>
</head>
<body>
<div><a href="#"
onclick="AddTR()">添加</a></div>
<table id="mytable">
<tr>
<th>id值</th>
<th>行数</th>
<th>操作</th>
</tr>
<tr id="1">
<td>1</td>
<td>第1行</td>
<td align="center"><a href="#" onclick="deleteTR(1)">删除
</a></td>
</tr>
</table>
<input type="hidden"
value="2" id="idval"/>
</body>
- 大小: 23.6 KB
分享到：
相关推荐
这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（数据单元格）组成。为了...
javaScript实现动态增删插入表格
总的来说，JavaScript实现的动态排序分页是通过监听用户交互，动态更新数据并重新渲染表格来达到目的。这一技术广泛应用于各种Web应用程序，尤其是在数据密集型的场景中，如报表、数据库查看器等。熟练掌握这部分...
在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`<table>`...
总结来说，动态添加表格行是通过JavaScript操作DOM实现的，涉及到创建新元素、设置元素内容和添加到合适的位置。了解这些基础操作对于构建交互式Web应用至关重要。在实际项目中，可以根据具体需求选择原生JavaScript...
这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...
在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`...
在这个例子中，我们将探讨如何利用JavaScript在HTML表格中实现动态添加行，并将数据提交到服务器进行存储。 首先，我们需要创建一个基本的HTML结构，包括一个表单和一个表格。表格中包含预定义的列，如项目名称、...
在本文中，我们将探讨如何使用JavaScript实现一个简单的动态表格。动态表格允许用户通过输入数据并点击“添加”按钮将新行添加到表格中，同时提供了删除行的功能。 首先，我们看到HTML部分定义了一个简单的表格结构...
JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。...在实际应用中，需要根据具体情况选择合适的方法和属性来实现动态创建表格的功能。
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
javascript实现的动态增减表格 dom ie
Web 页面动态表格数据导入 Excel 的 JavaScript 实现 在 Web 应用系统中，经常需要通过客户端浏览器实现对服务器数据库的查询访问，并根据客户端要求格式显示查询结果。如果客户端需要进一步报表处理数据时，如果...
在介绍如何使用JavaScript结合simpleChart库实现简单图表前，首先要了解simpleChart是一个能够快速生成图表的JavaScript库，它支持多种类型的图表，包括线性图、区域图、柱状图和饼图。simpleChart的主要优点是易于...
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考，具体如下： JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...
"工具"标签可能意味着这个练习可能会介绍一些辅助工具或者技巧，帮助开发者更高效地实现动态表格创建。例如，可能会讲解如何利用开发者工具来调试JavaScript代码，或者如何使用一些现有的库如jQuery来简化操作。 在...
在JavaScript编程中，实现表格动态变色是一种常见的交互效果，特别是在网页设计中，它可以提高用户的交互体验。以下是如何使用JavaScript实现这一功能的详细步骤和关键知识点： 1. **HTML 结构**： 首先，我们需要...
在IT领域，HTML和JavaScript是构建网页交互性的重要工具，尤其在创建动态表格时，这两者结合使用可以实现丰富的用户界面。本项目“HTML+JavaScript动态表格”专注于提供一种高效且用户友好的方式来处理表格数据，...
NULL 博文链接：https://1148130696.iteye.com/blog/1726191