今天给新人出了一道题：
dom 和 javascript 简单操作 完成对 table tr 的动态添加 删除功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
function insertRow() {
var num=0;
var x=document.getElementById('newbody');
var tr=document.createElement("tr");
var td0=document.createElement("td");
var td1=document.createElement("td");
var td2=document.createElement("td");
var nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.name = "name";
var valueInput = document.createElement("input");
valueInput.type = "text";
valueInput.name = "value";
var btnInput = document.createElement("input");
btnInput.type = "button";
btnInput.value = "delete";
btnInput.onclick = function(){
deleteRow(btnInput);
};
td0.appendChild (nameInput);
td1.appendChild (valueInput);
td2.appendChild (btnInput);
tr.appendChild (td0);
tr.appendChild (td1);
tr.appendChild (td2);
x.appendChild (tr);
}
function deleteRow(obj) {
var r = obj.parentNode.parentNode;
var x=document.getElementById('newbody');
x.removeChild(r);
}
</script>
</head>
<body>
<div style="margin: 0 auto;text-align:center;width:100%;height:100%">
<table width="70%" border="1" align="center" id="tableObj">
<tr>
<th scope="col">name</th>
<th scope="col">value</th>
<th scope="col"><input type="button" value="Add" onclick="insertRow();" /></th>
</tr>
<tbody id="newbody"></tbody>
</table>
</div>
</body>
</html>
分享到：
相关推荐
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
同样，你可以根据需求修改这个示例，比如添加删除行的功能，或者改变单元格的内容和行为。理解这些基本原理后，就能灵活应对各种复杂的交互需求了。在实际项目中，你可能会遇到性能优化、兼容性处理、错误处理等问题...
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
除了上述内容，标签中还提到“JS 动态 添加 Table TR TD 方法”，这表明文章着重讨论了使用原生JavaScript（不依赖于任何框架或库）来实现这一功能。在现代Web开发中，虽然诸如jQuery这样的库提供了更简便的方法来...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
<title>JS 动态添加删除行 <tr> 姓名 年龄 </tr> <!-- 动态添加的数据行将放在这里 --> ()">添加行 ()">删除选中行 function addRow() { var table = document.getElementById('myTable'...
在JavaScript中，动态地向HTML表格（`<table>`元素）添加或删除行（`<tr>`元素）是一项常见的任务，特别是在实现数据编辑、表单填充等交互功能时。本篇将详细介绍如何使用JavaScript实现这一功能，以供需要的朋友...
总的来说，"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript（主要是jQuery）的示例，它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用，例如在线...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...
在IT领域，尤其是在网页开发和用户界面设计中，动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列，提高了交互性和用户体验。本篇将深入探讨这一主题，主要关注如何实现这个...
在JavaScript（JS）编程中，动态管理HTML元素是常见的需求，特别是对于表格（Table）这样的数据展示组件。本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> <tr> 姓名 年龄 操作 </tr> <tr> 张三 <td>25 <td><button class="delete">删除</button></td> </...
以下是一个简单的例子，展示如何使用JavaScript添加和删除表格行： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...
本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...
这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....
flexigrid表格控件的使用实例，实现了和struts1.3的集成，实现了动态添加和删除。 文档包括： user_mgr.jsp ,jsp页面 UserAction.jsp ，控制层Action js包，相关的js jar使用到的jar包