<!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" />
<script type="text/javascript" src="jquery.js"></script>
<title></title>
<style type="text/css">
table.stats {
width: 480px;
border-collapse:collapse;
}
table.stats td {
border: 1px #000 solid;
}
</style>
<script>
$(document).ready(function(){
//<tr/>
$("#tab tr").attr("align","center");
//<tr/>
$("#but").click(function(){
var _len = $("#tab tr").length;
$("#tab").append("<tr id="+_len+" align='center'>"
+"<td>"+_len+"</td>"
+"<td>Dynamic TR"+_len+"</td>"
+"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
+"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td><td></td>"
+"</tr>");
t();
})
})
//ɾ<tr/>
var deltr =function(index)
{
var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//ɾǰ
for(var i=index+1,j=_len;i<j;i++)
{
var nextTxtVal = $("#desc"+i).val();
$("tr[id=\'"+i+"\']")
.replaceWith("<tr id="+(i-1)+" align='center'>"
+"<td>"+(i-1)+"</td>"
+"<td>Dynamic TR"+(i-1)+"</td>"
+"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
+"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td><td></td>"
+"</tr>");
}
t();
var arr = [1, 2, 3, 4, 5];
var removeItem = 2;
arr = $.grep(arr, function(value) {
return value != removeItem;
});
}
function t() {
var _len = $("#tab tr").length;
for (var i=1; i<_len; i++) {
$('#tab tr').eq(i).children().eq(4).text(i)
}
}
</script>
</head>
<body>
<table id="tab" border="1" width="60%" align="center" class="stats">
<tr>
<td width="20%"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value=""/>
</div>
</body>
</html>
分享到：
相关推荐
首先，要实现jQuery表格列宽拖动调整，我们需要理解以下几个核心概念： 1. **jQuery选择器**：jQuery提供了一系列强大的CSS选择器，用于快速定位DOM元素。在本场景中，我们可能需要选择表格的thead或tbody中的th...
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨...通过不断实践和学习，你将能掌握更多关于jQuery表格操作的高级技巧和最佳实践。
在本主题“jQuery表格插件仿Excel表格排序修改效果”中，我们将深入探讨如何利用jQuery实现类似Excel的表格排序功能，并对其进行优化和定制。 首先，我们需要了解jQuery表格插件的基础。常见的jQuery表格插件有...
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
【原创jQuery表格插件】是一种基于JavaScript库jQuery开发的组件，旨在增强网页中的表格功能，使其具有更丰富的交互性和灵活性。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...
《jQuery表格增删改查详解——基于Bootstrap框架》 在Web开发中，表格的数据操作是常见且重要的功能，包括添加、删除、修改和查询。本教程将深入探讨如何利用jQuery和Bootstrap框架实现这一功能，特别适合初学者...
<h1 class="datouwang">jQuery表格列自由拖动排序 点击排序"> 序列 点击排序"> 名称 点击排序"> 数量 点击排序"> 单价(Q点) 点击排序"> 总计(Q点) <td>1 农场话费A <td>2 <td>50 <td>100...
《jQuery表格控件深度解析与应用实践》 在Web开发领域，jQuery表格控件作为一款功能强大的工具，深受开发者喜爱。其丰富的特性、高效的性能以及易于使用的API，使其成为实现数据展示、操作和管理的理想选择。本文将...
本话题聚焦于“76、jquery表格内容控制效果”，这通常指的是利用jQuery来操作和控制HTML表格中的内容，实现动态显示、编辑、排序或过滤数据。以下是关于这一主题的详细知识讲解。 首先，jQuery的选择器是其强大功能...
本主题聚焦于"jQuery表格预览设置单元格选中取值代码"，这涉及到如何利用jQuery来实现对表格（Table）中的单元格（Cell）进行操作，包括选中和获取其值，以及可能的预览功能。这里我们将深入探讨相关的jQuery技术和...
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色
《jQuery表格内容修改删除代码详解》 在网页开发中，数据展示往往需要用到表格，而能够交互式的表格，如允许用户直接在表格内修改和删除数据，无疑会提升用户体验。本篇将详细介绍基于jQuery和Bootstrap构建的可...
**jQuery表格头和列固定插件——RWD Table** 在网页设计中，处理大型数据表格时，保持表头和特定列在用户滚动时可见是非常重要的功能。这有助于提高用户体验，尤其是当表格包含大量数据，需要用户上下左右滚动时。`...
总的来说，jQuery表格列表拖动排序的实现结合了DOM操作、事件监听和数据同步等多个JavaScript核心概念。通过学习和实践此类功能，开发者不仅可以提升自身的jQuery技能，还能为用户创造出更加直观、友好的交互体验。
"jquery表格排序"是一个基于jQuery实现的功能，允许用户通过点击表头对表格数据进行升序或降序排序，极大地提高了用户体验。这个功能在数据分析、报告展示等场景下尤为实用。 首先，我们要了解jQuery的基本概念。...
**jQuery表格树插件详解** 在网页开发中，表格是一种常用的数据展示方式，但随着数据结构的复杂化，普通的二维表格往往无法满足需求。这时，jQuery表格树（jQuery TreeTable）就应运而生，它将传统的表格扩展为可...
为了解决这个问题，开发者们通常会利用JavaScript库，如jQuery，来实现更高级的功能，例如表格信息的自动向上滚动。本文将深入探讨如何利用jQuery实现这一效果，以及相关知识点。 首先，jQuery是一个轻量级的...
本篇文章将深入探讨jQuery表格排序的相关知识点。 一、基本概念 1. jQuery：jQuery是一个轻量级的JavaScript库，它的API设计简洁易用，能够快速地进行DOM操作，减少开发者的工作负担。 2. 表格（Table）：HTML中...
**jQuery表格树插件详解** 在网页开发中，表格数据的展示经常需要处理大量结构化的信息，而将这些数据组织成树形结构可以更清晰地展现层级关系，提高用户的浏览体验。`jQuery表格树插件`就是为此目的设计的工具，它...