//HTML
<a href="javascript:void(0)" onclick="AddAttachment()">[点击添加附件]</a>
<table cellpadding="0" cellspacing="3" id="id_attachmentpanel"></table>
=========================================================
//新增文章页面
function AddAttachment() {
var objTable = $("#id_attachmentpanel");
var intCount = $("#id_attachmentpanel tr").children().size() / 2 + 1;
if (intCount > 5) { alert("附件不能超过5个"); return; }
objTable.append("<tr><td>" + intCount + ". <input type='file' name='file" + intCount + "' onchange='FileExtChecking(this,1)' /></td><td><a href='javascript:void(0)' onclick='AddAttachment()'>[增加]</a><a href='javascript:void(0);' onclick='DisposeTr(this)'>[取消]</a></td></tr>");
$("#id_attachmentpanel a").hide();
$("#id_attachmentpanel a").last().show();
if (intCount < 5) { $("#id_attachmentpanel a").last().prev().show(); }
}
function DisposeTr(arg_obj_item) {
var objTr = $(arg_obj_item).parent().parent();
objTr.remove();
$("#id_attachmentpanel a").last().show();
$("#id_attachmentpanel a").last().prev().show();
}
============================================================
//编辑文章页面
function AddAttachment() {
var intAttach = '<%=intAttach %>';
var objTable = $("#id_attachmentpanel");
var intCount = $("#id_attachmentpanel tr").children().size() / 2 + 1;
if (intCount > (5-intAttach)) { alert("附件不能超过5个"); return; }
objTable.append("<tr><td>" + intCount + ". <input type='file' name='file" + intCount + "' onchange='FileExtChecking(this,1);' /></td><td><a href='javascript:void(0)' onclick='AddAttachment()'>[增加]</a><a href='javascript:void(0);' onclick='DisposeTr(this)'>[取消]</a></td></tr>");
$("#id_attachmentpanel a").hide();
$("#id_attachmentpanel a").last().show();
if (intCount < (5-intAttach)) { $("#id_attachmentpanel a").last().prev().show(); }
});
function DisposeTr(arg_obj_item) {
var objTr = $(arg_obj_item).parent().parent();
objTr.remove();
$("#id_attachmentpanel a").last().show();
$("#id_attachmentpanel a").last().prev().show();
}
==========================================
分享到:
相关推荐
### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时,我们经常需要动态地从服务器获取数据,并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...
本文将围绕“jQuery动态添加table”这一主题进行深入探讨,结合给出的资源,我们可以学习如何利用jQuery高效地在网页上动态创建和操作表格。 首先,我们来看“jQuery动态添加table”的基本概念。在网页设计中,...
标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...
要使用jQuery动态添加表格行,可以编写一个函数,根据需要插入新的行数据。以下是一个简单的示例: ```javascript function addRow(name, age) { var newRow = $("<tr><td>" + name + "</td><td>" + age + "</td>...
在本文中,我们将深入探讨如何使用jQuery来动态地向HTML表格(table)中添加行(tr)。这个功能在处理用户输入、数据展示或构建交互式Web应用时非常常见。通过以下示例,我们可以看到如何结合JavaScript和jQuery实现...
本篇文章将深入探讨如何使用jQuery动态添加控件,包括元素的创建、插入和绑定事件,以及在实际项目中的应用。 首先,我们来了解jQuery如何创建新的HTML元素。在JavaScript中,创建元素通常是通过`document....
本篇文章将深入探讨如何使用jQuery来动态地给HTML表格(table)赋值,通过一个具体的实例来展示相关技巧。 首先,我们需要一个基本的HTML结构,包含一个具有特定类和ID的table元素。在这个例子中,我们有一个layui...
本文将深入探讨如何使用 jQuery 动态添加和删除表格行,以实现高效且用户友好的数据展示。 首先,理解 HTML 表格的基本结构至关重要。`<table>` 元素用于创建表格,`<tr>` 代表表格行,`<td>` 或 `<th>` 分别表示...
总的来说,实现动态添加和删除表格行的基本步骤如下: 1. 选择表格和行:使用jQuery选择器定位到表格和目标行。 2. 创建新行:准备要插入的新行的HTML代码。 3. 插入行:使用`.after()`或`.before()`方法在适当的...
本教程将深入探讨如何使用jQuery实现动态更改table表格数据,让你的网页表格具有实时编辑功能,提升用户体验。 首先,我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`元素开始,包含若干个`<tr>`(行)...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...
本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能,这在许多网页应用中是非常常见的需求。 首先,让我们理解基本概念。在HTML中,表格由`<table>`元素定义,每行由`<tr>`元素表示,而单元格则由`<td>`...
本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...
这里的`<table>`元素有一个ID `dynamicTable`,我们将用jQuery选择这个元素并动态添加数据。 2. **CSS样式**: CSS用于设置隔行变色的样式。可以创建如下样式: ```css #dynamicTable tbody tr:nth-child(even)...
本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作,包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考,具体如下: HTML页面元素如下: <!-- 订单明细dialog --> 销售订单明细 xss=removed> <table class=exhibit_table id=...
在网页开发中,数据展示通常会使用到表格(table)元素,而为了提供更好的用户体验,我们经常需要实现表格数据的动态排序功能。本教程将详细讲解如何使用Jquery库实现前端表格(table)按表头(th)进行排序。Jquery...
### jQuery 动态添加删除知识点解析 #### 一、概述 在Web开发中,动态地对页面元素进行增删操作是十分常见的需求。利用jQuery框架,开发者可以方便地实现这一功能。本文将根据提供的示例代码,深入分析如何使用...