`

Dom动态地增加和删除表格

    博客分类:
  • Web
 
阅读更多
	function saveInfo()
	{
		var tb = document.getElementById("tb");
		var mytr = document.createElement("tr");
		mytr.align = "center";
		var mytd1 = document.createElement("td");
		var mytd2 = document.createElement("td");
		var mytd3 = document.createElement("td");
		var name = document.createTextNode(document.getElementById("username").value);
		var pwd = document.createTextNode(document.getElementById("userpwd").value);
		
		var mya = document.createElement("a");
		mya.href = "#";
		mya.onclick = delMe;
		var del = document.createTextNode("删除");
		mya.appendChild(del);
		mytd1.appendChild(name);
		mytd2.appendChild(pwd);
		mytd3.appendChild(mya);
		mytr.appendChild(mytd1);
		mytr.appendChild(mytd2);
		mytr.appendChild(mytd3);
		tb.appendChild(mytr);
			
	}
	function delMe()
	{
		var mytr = this.parentNode.parentNode;
		if(confirm("您确定要删除"+mytr.firstChild.firstChild.nodeValue+"吗?"))//获取表格中的值
		{
		//confirm("您确定要删除"+mytr.firstChild.firstChild+"吗?");
			mytr.parentNode.removeChild(mytr);
		}
	}
分享到:
评论

相关推荐

    JS动态增加删除表格行

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

    js表格操作,DOM实现数据动态增删查改

    本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能,这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构,包括`<thead>`定义表头,`...

    表格行记录动态增加和删除

    总的来说,动态增加和删除表格行是Web开发中的常见需求,涉及JavaScript基础、DOM操作以及可能的前端框架知识。理解并掌握这些技术,对于提高用户体验和优化界面交互至关重要。通过实践和不断学习,开发者可以更好地...

    jquery动态增加修改删除表格,上移下移功能

    在这个“jquery动态增加修改删除表格,上移下移功能”的项目中,开发者利用jQuery实现了对表格的动态操作,这在网页数据展示和管理中非常常见。 首先,我们来理解这个项目的标题:“jquery动态增加修改删除表格,上移...

    几种经典的jQuery动态增加删除表格的实例

    本篇文章将详细探讨几种经典的jQuery动态增加删除表格的实例,同时也将涵盖一种使用原生JavaScript实现的方法。 首先,jQuery动态增加表格行通常涉及以下几个步骤: 1. **创建HTML结构**:一个基本的表格由`...

    动态添加删除表!格动态添加删除表格!

    在IT领域,尤其是在网页开发和用户界面设计中,动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列,提高了交互性和用户体验。本篇将深入探讨这一主题,主要关注如何实现这个...

    jquery可增加删除列表格

    在描述中提到了一个博客链接,虽然没有具体内容,但可以推测博主分享了一个关于如何使用jQuery实现列表格动态操作的示例或教程。通常,这种教程会包含HTML结构、CSS样式以及使用jQuery进行操作的JavaScript代码。 ...

    树形表格菜单 动态添加节点/动态删除节点/动态移动节点

    4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格类似Extjs 10.树状结构可以选择出现在某一列...

    JQuery实现动态表格点击按钮表格增加一行

    在这个例子中,DOM操作用于动态地向表格中插入新的行(`insertRow`)和单元格(`insertCell`)。 2. 表格操作:表格是HTML中表示表格数据的结构,由`<table>`、`<tr>`(表格行)、`<td>`(表格数据单元格)或`<th>`...

    纯javascript增加删除表格行

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

    DHTML实现表格的增加和删除

    删除表格行的操作相对简单,同样需要JavaScript来执行。一般会为每一行提供一个删除按钮,点击时触发删除函数,通过获取当前行的索引并调用`deleteRow()`方法来移除它。 ```javascript function deleteRow() { var...

    前端:表格内容的添加和删除

    本教程将深入讲解如何在HTML表格中实现内容的添加和删除功能,这对于掌握DOM操作和理解JavaScript、CSS及HTML的基础应用至关重要。 首先,我们需要创建一个基本的HTML表格结构。HTML的`<table>`元素是表格的核心,...

    jQuery表格增加删除代码.zip

    首先,我们从标题"jQuery表格增加删除代码.zip"可以推断,这个压缩包包含的是一个使用jQuery实现的表格动态操作的示例。这种功能通常用于用户需要动态添加或删除表格行的场景,比如在线表单填写、数据管理界面等。 ...

    jquery实现的可增加,删除行,可多行上下移动表格

    标题 "jquery实现的可增加,删除行,可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行,以及上下移动表格中的行,提供了更灵活的数据操作体验...

    jquery 添加、删除表格

    这篇博客“jquery 添加、删除表格”显然关注的是如何使用jQuery来操作HTML表格,实现动态添加和删除行的功能。这在构建数据驱动的Web应用中尤其常见,比如用户管理、订单处理或任何需要展示和编辑表格数据的场景。 ...

    表格删除线

    这些框架提供了更加高效和便捷的方式来管理和更新DOM,实现表格的动态操作。比如在React中,可以创建一个状态变量来追踪被选中的行,然后在组件的`render`方法中根据这个状态决定是否添加删除线的样式。 此外,为了...

    jquery操作表格增加删除

    删除表格中的行,可以使用`.remove()`方法,配合`:last`或`:first`等选择器,或者通过特定条件(如点击按钮)来定位目标行。例如,删除最后一个行: ```javascript $("#myTable tbody tr:last").remove(); ``` 五...

    jQuery实现动态添加、删除按钮及input输入框的方法

    在Web前端开发中,动态地添加和删除页面元素是一种常见的交互方式,尤其在表单设计中,这种功能的实现能够极大地提升用户体验。使用jQuery库可以方便地实现这些功能,因为它提供了丰富的选择器和方法来操作DOM元素。...

Global site tag (gtag.js) - Google Analytics