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

javascript动态实现添加和删除表格行

阅读更多
今天闲来无事,用js做了个小例子,动态添加和删除表格行,附上源码。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态增加和删除表格行</title>
	
	<script type="text/javascript">		
		window.onload = function addRow() {
			var name = document.getElementById("name").value;
			var age = document.getElementById("age").value;
			
			var nameText = document.createTextNode(name); //创建文本节点
			var ageText = document.createTextNode(age);
			
			var nameTd = document.createElement("td"); //创建td节点
			var ageTd = document.createElement("td");
			
			var tr = document.createElement("tr");	//创建tr节点
			nameTd.appendChild(nameText);
			ageTd.appendChild(ageText);
			
			tr.appendChild(nameTd);
			tr.appendChild(ageTd);
			
			var tbody = document.getElementById("tbody");
			tbody.appendChild(tr);
		}
		
		function delRow() {
			var objTbody = document.getElementById("tbody");
			objTbody.removeChild(objTbody.lastChild); //删除最后一个子节点,因为表格每删除一行行号会自动发生变化。所以每次从最后删除
		}
	</script>
</head>

<body>	
	<table id="t1" border="1">
		<thead>
			<tr>
				<td>Name</td>
				<td>Age</td>
			</tr>
		</thead>
		<tbody id="tbody">
			<tr>
				<td>name1</td>
				<td>25</td>
			</tr>
			<tr>
				<td>name2</td>
				<td>26</td>
			</tr>
		</tbody>
	</table>
	<hr>
	
	Name:<input type="text" id="name" />Age:<input type="text" id="age" />
	<input type="button" value="add" onclick="addRow()"/>
	<input type="button" value="del" onclick="delRow()"/>
</body>

</html>
分享到:
评论

相关推荐

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...

    javascript实现动态添加删除表格行

    NULL 博文链接:https://1148130696.iteye.com/blog/1726191

    动态添加/删除表格行并提交内容到后台

    总结起来,实现动态添加/删除表格行并提交内容到后台的过程涉及前端JavaScript的事件监听、DOM操作以及AJAX请求,后端C#的HTTP请求处理和数据库操作。这种功能在实际项目中非常常见,对于初学者来说,理解并掌握这些...

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    javascript动态添加表格数据行

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

    js 添加删除表格

    以下是一个简单的例子,展示如何使用JavaScript添加和删除表格行: ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

    jQuery 动态添加或删除表格行

    在网页开发中,jQuery库因其简洁的语法和强大的功能,被广泛用于处理DOM操作,包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先,我们来理解HTML表格的基本结构。一个表格由`...

    纯javascript增加删除表格行

    3. **删除行**:删除表格行通常涉及到选择要删除的行,并调用`removeChild()`方法。例如,假设我们想删除点击时的当前行,可以这样实现: ```javascript function deleteRow(event) { if (confirm('确定要删除...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(表格行)元素,每行内可以有多个`&lt;td&gt;`(表格数据单元格)或`...

    动态插入、添加删除表格行的JS代码

    ### 动态插入、添加删除表格行的JS代码 在网页开发中,表格是一个非常重要的元素,用于展示数据。为了使网页更具交互性,我们常常需要动态地对表格进行操作,比如插入或删除行等。本文将通过一个具体的示例来讲解...

    jquery表格动态添加删除行代码.zip

    总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    在JavaScript(JS)中,创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求,尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先,我们需要在HTML中创建一个...

    使用jQuery实现动态添加、删除表格

    本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行,这在数据展示和用户交互中非常常见,特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前,我们需要确保网页已经引入了jQuery库。...

    js动态添加和删除行

    "js动态添加和删除行"这个主题就是关于如何利用JavaScript在HTML表格(`&lt;table&gt;`)中实现动态添加和移除行的功能。这种功能在数据展示、用户输入等场景下非常常见,比如在线表格编辑器、数据库数据查看等。 动态...

    javascript动态操作表格

    接下来是删除表格。这通常涉及到找到特定的表格元素并使用`removeChild()`方法移除它们。例如,要删除刚才创建的表格,你可以这样操作: ```javascript // 假设我们保存了表格引用 document.body.removeChild(table...

Global site tag (gtag.js) - Google Analytics