<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#getAtr").click(function(){
$str='';
$str+="<tr align='center'>";
$str+="<td><input type='text' name='advTitle[]'/></td>";
$str+="<td><input type='file' name='img[]' /></td>";
$str+="<td><input type='text' name='advContent[]' /></td>";
$str+="<td><input type='text' name='advSource[]' /></td>";
$str+="<td><input type='text' name='advAuthor[]' /></td>";
$str+="<td><input type='text' name='advPosition[]' /></td>";
$str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";
$str+="</tr>";
$("#addTr").append($str);
});
});
function getDel(k){
$(k).parent().remove();
}
</script>
--------------------------------------------------------------------------------
html部分
<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td>广告名称</td>
<td>广告图片</td>
<td>广告内容</td>
<td>广告来源</td>
<td>广告作者</td>
<td>广告描述</td>
<td align="center"><a href="#" id="getAtr">追加内容</a></td>
</tr>
<tbody id="addTr">
<tr align="center">
<td><input type="text" name="advTitle[]"/></td>
<td><input type="file" name="img[]" /></td>
<td><input type="text" name="advContent[]" /></td>
<td><input type="text" name="advSource[]" /></td>
<td><input type="text" name="advAuthor[]" /></td>
<td><input type="text" name="advPosition[]" /></td>
<td></td>
</tr>
</tbody>
<tr align="center">
<td colspan="5"><input type="submit" value="全部添加" /></td>
</tr>
</table>
分享到:
相关推荐
在介绍jQuery动态添加删除表格行(tr)和单元格(td)的过程中,首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库,它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互,对于Web开发人员来...
在网页开发中,jQuery 是一个...在本示例中,我们将详细探讨如何使用 jQuery 追加和删除 HTML 表格中的 `tr`(表格行)元素。 首先,确保在页面中引入了 jQuery 库。在示例代码中,我们看到以下引入语句: ```html ...
本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能,这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行,可以提高用户的交互体验,使得数据管理更加灵活。 首先,我们需要创建一个基本的...
jQuery是目前在网页前端开发中广泛...以上就是根据文档标题、描述及部分内容提炼的关于JQuery操作表格中tr和td内容的方法实例的知识点。在实际应用中,这些操作非常基础但实用,是网页前端开发不可或缺的一部分技能。
通过以上分析,我们可以看到,使用jQuery进行动态添加和删除表格行的操作非常简便。这种技术不仅提高了网页的交互性,也为数据的动态管理提供了可能。开发者只需要掌握基本的选择器、事件绑定和DOM操作方法,就能...
本项目“jQuery自定义添加删除表格行内容特效”是基于jQuery实现的一种交互式功能,它允许用户动态地在表格中添加和删除行,大大提升了用户体验。下面将详细介绍这一功能的实现原理和关键代码。 首先,我们需要理解...
- 然后将克隆出来的行(tr)使用appendTo("#tb")方法追加到id为tb的表格中。 - 此外,还可以使用insertBefore("#tbtr:last")方法将克隆的行添加到最后一行之前。 - 此操作示例演示了如何复制一个现有的表格行,并将...
5. **创建新行**:使用jQuery的字符串拼接和`$()`函数创建一个新的`<tr>`元素,其中包含用户输入的数据以及一个用于删除的链接。`<tr>`元素被存储在变量 `$tr` 中。 6. **添加到表格**:`$("#usertable").append($...
今天在项目中,刚好用到给指定的table添加一行、删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复...
动态追加、插入和删除行是用户界面交互中的基本功能,可以极大地提升用户体验。这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容,但我们可以根据这...
从给定的文件信息中,我们可以提取到关于JQuery操作table中的tr和td的四个实用知识点,具体分析如下: 第一个知识点:清空tr中的内容 在JQuery中,如果需要清空一个具有特定id的tr元素里的所有td元素,我们可以使用...
除了基本的添加和删除行操作,还可以结合其他jQuery方法和函数实现更复杂的功能,如数据验证、异步加载等。例如,可以使用`.serializeArray()`序列化表格数据,便于与服务器交换信息;或者使用`.clone()`复制行,...
jQuery提供了便利的方法来遍历表格的行(tr)和单元格(td)。`$('table tr').each(function() {...})`可以遍历所有表格行,而`$('td', this).each(function() {...})`可以在每个行内部遍历单元格。在循环体中,`...
这篇“Jquery_学习笔记.zip”压缩包显然包含了一位开发者的学习过程,重点是使用jQuery来实现自定义功能,如追加和删除数据行,同时结合了Layui前端框架。Layui是一款轻量级且功能丰富的前端UI框架,它提供了丰富的...
本教程将重点讲解如何使用jQuery实现动态表格,包括动态添加和删除表格行的功能。 首先,我们需要了解HTML表格的基本结构。一个简单的表格由`<table>`标签开始,`<tr>`表示表格行,`<th>`定义表头单元格,而`<td>`...
在JQuery中实现table按列分组,主要涉及对DOM元素的操作和数据处理。下面我们将介绍两种方法:基于列索引和基于列name值进行分组。 1. **基于列索引分组** 基于列索引的方法是根据表格(`<table>`)中每一行(`<tr...
在处理HTML表格(table)数据时,jQuery提供了诸多方法和选择器来实现数据的增加、保存和删除操作。 首先,在前端页面中处理数据的增、删、改操作可以有效地减少服务器端的负担。在很多情况下,页面上的数据是用户...
- **API 对比**:与原生 JavaScript 相比,jQuery 提供了一套更加简洁和易于使用的 API。例如,使用原生 JavaScript 获取元素的方式为 `document.getElementById('elementId')`,而在 jQuery 中则简化为 `$('#...
标题《jquery增加和删除元素的方法》和描述《主要介绍了jquery增加和删除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以参考下》为我们明确了文章将要介绍的核心内容是关于jQuery库中用于元素增删的...