`
jeasony
  • 浏览: 200007 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

js动态添加删除表格

    博客分类:
  • js
阅读更多
<script type="text/javascript">
		//全局变量
		var i=0;
		//添加行
		function addMyRow(){
			var mytable = document.getElementById("mybody");
			var mytr = mytable.insertRow();
			mytr.setAttribute("id","tr"+i);
			var mytd_1=mytr.insertCell();
			var mytd_2=mytr.insertCell();
			var mytd_3=mytr.insertCell();
			var mytd_4=mytr.insertCell();
			var mytd_5=mytr.insertCell();
			mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";
			mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";
			mytd_3.innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";
			mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";
			mytd_5.innerHTML="<input type='button' value='删除' onclick=\"delMyRow('"+i+"')\"/>";
			i++;
		}
		//删除当前行
		function delMyRow(j){
			var mytable = document.getElementById("mybody");
			var myrow = document.getElementById("tr"+j);
			mytable.deleteRow(myrow.rowIndex-1);
		}
		//删除所有行
		function delAllMyRow(){
			var mytable = document.getElementById("mybody");
			var rowlen=mytable.rows.length;
			for(var i=rowlen-1;i>=0;i--){
				mytable.deleteRow(i);
			}
		}
		</script>

 

<input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();">
		<table border="1">
			<thead>
				<tr bgcolor="red">
					<td align="center">
						姓名
					</td>
					<td align="center">
						性别
					</td>
					<td align="center">
						爱好
					</td>
					<td align="center">
						籍贯
					</td>
					<td align="center">
						操作
					</td>
				</tr>
			</thead>
			<tbody id="mybody">
			
			</tbody>
		</table>

 转载于   http://zhou-hong-liang.iteye.com/ 。。。。

分享到:
评论

相关推荐

    JavaScript动态添加删除表格行

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

    js 添加删除表格

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

    JS动态增加删除表格行

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

    动态添加js,动态添加表格和删除表格,批量添加记录,批量添加

    动态添加js,动态添加表格和删除表格,批量添加记录,批量添加

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

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

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

    在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...

    JS动态添加删除HTML元素(实例)

    JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一,今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先,让我们了解一下 HTML 文档对象模型(DOM),它...

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

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

    vue动态添加删除表格数据代码

    以上就是基于Vue.js的动态添加删除表格数据的基本实现。这个项目提供了一个直观的示例,展示了如何在前端利用Vue的数据驱动特性和Bootstrap的样式创建一个用户友好的管理界面。通过学习和实践这个例子,开发者可以更...

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

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

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

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

    javascript动态添加表格数据行

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

    74、jquery表格动态添加删除行代码

    动态添加和删除行通常涉及向现有表格动态插入或移除这些元素。 1. **动态添加行**: - 使用jQuery,可以获取表格引用,例如`$("#myTable")`,其中`#myTable`是表格的ID。 - 创建新的`&lt;tr&gt;`元素,可以使用`$('&lt;tr&gt;...

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

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

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

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

    jQuery 动态添加或删除表格行

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

    js 操作表格动态添加和删除行

    js 操作表格动态添加和删除行

Global site tag (gtag.js) - Google Analytics