<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>jQuery 表格自动增加</title>
<meta name="keywords" content="jQuery, 表格, table, 自动增加" />
<meta name="description" content="jQuery表格自动增加" />
<meta name="viewport" content="width=device-width" />
<meta name="copyright" content="imsole.net" />
<meta name="designer" content="sole" />
<meta name="publisher" content="imsole.net" />
<meta name="author" content="sole" />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<style type="text/css">
table { width:800px; margin:50px auto; border-collapse:collapse; border-spacing:0; }
table tr, table th, table td { border:1px solid #ddd; font-size:12px; }
table tr td:first-child { width:30px; text-align:center; }
table td input { width:100%; height:100%; padding:5px 0; border:0 none; }
table td input:focus { box-shadow:1px 1px 3px #ddd inset; outline:none; }
</style>
<body>
<table id="count">
<tr><th>序号</th><th>姓名</th><th>金额[USD]</th><th>时间</th><th>项目</th><th>单位</th><th>备注</th></tr>
<tr>
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* 这是一种方法，但是不精简，不过很好理解，就像面向过程编写代码一样。
var oTable = $("#count"), oTr = '', oInput = '', eEle = '';
oTable.on('mouseover', function(){
oTr = oTable.find('tr').last();
oInput = oTr.find('input');
eEle = oTr.clone();
oInput.on('click', function(){
var parent = $(this).parents('tr');
if(oTr.index() == parent.index()){
oTable.append(eEle);
}
});
});
*/
//这是第二种方法，比较精简，要看对jQ的理解了。
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
var target = e.target,
oTr = $(target).closest('tr');
if(oTr.index() == oTable.find('tr').last().index()){
iNum++;
eEle = oTr.clone();
eEle.find('td').eq(0).text(iNum);
}
oTable.append(eEle);
});
});
</script>
</body>
</html>
http://www.oschina.net/code/snippet_723890_27479
分享到：
相关推荐
总的来说，利用jQuery实现表格自动向上滚动是提高用户体验的有效方法，它结合了事件处理、动画和DOM操作等多个jQuery的核心特性。通过以上步骤和示例，你可以轻松地将这个功能应用到自己的项目中。
本项目“jQuery表格信息自动向上滚动代码”聚焦于利用jQuery实现一个功能丰富的表格展示效果，尤其适合在数据量较大时提供更好的用户体验。 首先，`index.html`是网页的主文件，它包含了页面的基本结构以及对其他...
#### 知识点一：jQuery表格排序插件介绍 在Web开发中，数据展示经常需要通过表格的形式呈现给用户，并且为了方便用户查找所需信息，通常会提供排序功能。传统的表格排序往往需要后端的支持，但这种方式可能会增加...
总的来说，jQuery表格列表拖动排序的实现结合了DOM操作、事件监听和数据同步等多个JavaScript核心概念。通过学习和实践此类功能，开发者不仅可以提升自身的jQuery技能，还能为用户创造出更加直观、友好的交互体验。
通过上述知识点，我们可以用jQuery编写一个简洁有效的自动滚动循环滚动新闻展示效果。在实际应用中，可能还需要考虑更多的用户体验和浏览器兼容性问题，例如在不同分辨率的屏幕上展示效果的适配、触屏设备的手势操作...
这个"jquery+json自动形成表格插件.zip"文件提供了一个实用的解决方案，帮助开发者快速创建动态表格，尤其适用于那些需要展示结构化数据的网页应用。下面将详细解释其中涉及的技术点。 首先，jQuery是一个强大的...
1. **分页**：`jQuery.fancyTable`支持表格数据的分页展示，用户可以根据需要调整每页显示的数据数量，提高页面加载速度。 2. **排序**：用户可以点击表头对数据进行升序或降序排序，插件自动处理排序逻辑，提供...
在这个“jQuery购物车自动计算金额表单”项目中，我们主要关注如何利用jQuery这个强大的JavaScript库来实现动态计算购物车中商品的总价。以下是对该项目的详细说明： 1. **jQuery库**：jQuery是一个轻量级的...
本资源“jQuery表格增加删除行响应式代码.zip”提供了实现动态表格功能的示例代码，尤其适用于响应式设计，使表格在不同设备上都能保持良好的用户体验。 响应式设计是现代网页开发的关键特性，它确保网站在桌面、...
jqGrid是一款基于jQuery的开源表格插件，专为数据管理和展示设计，提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点： 1. **基本使用**：...
在本篇文章中，我们将深入探讨jQuery表格插件的基本概念、核心功能以及如何在实际项目中应用。 首先，了解jQuery是至关重要的。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax...
以上就是使用Ajax和jQuery实现表格自动增加行的基本流程。通过这种方式，我们可以创建出更动态、响应更快的Web应用，提升用户的交互体验。如果你需要深入学习，可以查阅jQuery官方文档以及相关的Ajax教程，进一步...
创建自定义的jQuery表格插件涉及到前端开发的多个技术点。以下从各个方面详细阐述实现该插件时需要掌握的知识点。 ### jQuery基础 jQuery是一个快速、简洁的JavaScript库，它极大地简化了HTML文档遍历、事件处理、...
要实现多个表格之间的自动或手动切换，可以采用jQuery提供的多种方法。这里介绍一种基本的实现思路： 1. **HTML结构准备**： - 创建多个包含`<table>`元素的容器，并为它们分配不同的ID。 - 使用按钮或其他控件...
本文将深入探讨如何使用 jQuery 和 Bootstrap 实现带分页的表格数据搜索和筛选功能。 首先，Bootstrap 提供了丰富的 CSS 样式和组件，包括表格（Table）样式，使得我们可以轻松创建出响应式的、美观的表格。而 ...
### JQuery 实现可编辑的表格知识点详解 #### 一、前言 在Web开发中，交互式的表格设计能够显著提升用户体验。本篇文章将基于提供的代码片段来深入解析如何使用JQuery实现一个简单但实用的可编辑表格功能。通过...
以下是一些重要的jQuery表格插件及其主要功能： 1. Flexigrid - 这是一个Web 2.0风格的JavaScript表格，它具有可变列宽、自动适应表头宽度的能力，并可以通过Ajax连接XML数据源。它的设计灵感来源于Ext Grid，但...
1. **自动伸缩**：tilesjs控件能够根据表格数据的数量自动调整自身的大小，无论是增加或减少数据行，都能够保持布局的整洁和美观。 2. **动态加载**：当数据量过大时，tilesjs支持分页和懒加载机制，只在用户滚动到...
无论用户是在手机、平板还是桌面设备上查看，表格都会根据设备的宽度自动调整布局。 8. **自定义扩展**：虽然这个项目提供了一个基础的实现，但开发者可以根据自身需求进行扩展，例如添加验证功能、错误提示、多列...
本文将详细解释利用jQuery实现点击单元格自动增加一行表格的功能，并分享具体的代码实现。在前端开发中，表格是一种常见且重要的数据展示方式，而动态地操作表格数据（如增加行）是实现动态交互的常用技术之一。使用...