`

jquery 初探 动态增加删除表格行

阅读更多
<script src="jquery/jquery-1.3.1.js"></script>
<style type="text/css">
body{background:#FFFFFF;}
</style>
</head>
<body>
<script>
	$(function(){
		var show_count = 20;   //要显示的条数
		var count = $("input:text").val();    //递增的开始值,这里是你的ID
		var fin_count = parseInt(count) + (show_count-1);   //结束递增的条件
		

		$("#btn_addtr").click(function(){
			if(count < fin_count)    //点击时候,如果当前的数字小于递增结束的条件
			{
				$("tr:eq(1)").clone().appendTo("table");   //在表格后面添加一行
				$("tr:last td input:first").val(++count);   //改变添加的行的ID值。
			}
		});
	});

	function deltr(){
		var length=$("tr").length;
		if(length<=2){
			alert("至少保留一行");
		}else{
			$("tr:last").remove();
		}
	}
</script>
<input type="button" id="btn_addtr" value="增行">
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
    <td align="center" bgcolor="#CCCCCC">Username</td>
    <td align="center" bgcolor="#CCCCCC">Usertype</td>
    <td align="center" bgcolor="#CCCCCC">Other</td>
	<td></td>
  </tr>

  <tr>
    <td height="30" align="center"><input type="text" size="2" value="1" /></td>
    <td align="center"><input type="text" name="username" /></td>
    <td align="center">
      <select name="type">
		   <option value="1">Administrator</option>
		   <option value="2">Guest</option>
      </select>
    </td>
    <td align="center"><input type="text" name="username2" /></td>
	<td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td>
  </tr>

</table>
</body>
分享到:
评论

相关推荐

    jQuery 动态添加或删除表格行

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

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

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...

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

    本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能,这在许多网页应用中是非常常见的需求。 首先,让我们理解基本概念。在HTML中,表格由`&lt;table&gt;`元素定义,每行由`&lt;tr&gt;`元素表示,而单元格则由`&lt;td&gt;`...

    jquery动态创建、删除表格中的行

    jquery动态创建表格中的行、删除指定行

    jquery 动态增加删除表格. 实例

    本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能,这对于创建数据表或者交互式表单来说非常实用。 首先,我们需要一个基本的HTML结构来展示表格。表格通常由`&lt;table&gt;`元素定义,每一行由`&lt;tr&gt;`元素...

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

    通过本篇文章,我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法,同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先,我们需要注意的是,当页面加载完毕后,jQuery的$(document)....

    jquery动态添加 删除指定行元素

    总的来说,动态添加和删除表格行是前端开发中常见的功能,jQuery提供了简洁而强大的API来处理这类任务。通过理解并运用`add()`和`del()`函数,开发者可以轻松地实现这些功能,同时还能根据具体场景进行优化和扩展。

    Jquery实现表格动态增加一行,删除一行.html

    Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)

    jquery动态控制表格的行

    在本主题中,我们将深入探讨如何使用jQuery动态控制表格的行,包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要,因为用户通常需要与表格进行交互,例如查看、编辑或删除数据。 首先,让我们讨论...

    jQuery 动态添加、删除表格行特效

    本资源主要探讨的是如何使用jQuery实现动态添加和删除表格行的特效,这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先,jQuery提供了方便的DOM操作方法,如`append()`和`remove()`,可以...

    jquery动态添加删除(tr/td)

    在介绍jQuery动态添加删除表格行(tr)和单元格(td)的过程中,首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库,它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互,对于Web开发人员来...

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

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

    原生JS和JQuery动态添加、删除表格行的方法

    ### 原生JS和JQuery动态添加、删除表格行的方法知识点 #### 知识点一:原生JavaScript动态添加表格行 在原生JavaScript中,动态添加表格行可以通过获取表格对象,然后使用`insertRow`和`insertCell`方法来实现。`...

    JavaScript动态添加删除表格行

    在JavaScript编程中,动态添加和删除表格行是一个常见的需求,特别是在网页交互和数据展示中。这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具...

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

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

    jQuery实现动态更改table表格数据

    本教程将深入探讨如何使用jQuery实现动态更改table表格数据,让你的网页表格具有实时编辑功能,提升用户体验。 首先,我们需要理解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素开始,包含若干个`&lt;tr&gt;`(行)...

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

    总结起来,无论是使用jQuery还是原生JavaScript,动态增加和删除表格行都提供了灵活的方式去更新网页上的数据。jQuery简化了DOM操作,使代码更简洁;而原生JavaScript则提供了更底层的控制,适合对性能有较高要求或...

    jquery动态添加删除行 点击按钮动态添加行或动态删除行

    jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列

    jquery表格添加删除行点击按钮动态添加删除行

    本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能,这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行,可以提高用户的交互体验,使得数据管理更加灵活。 首先,我们需要创建一个基本的...

Global site tag (gtag.js) - Google Analytics