`

jquery 追加tr和删除tr

 
阅读更多
<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和删除tr示例代码

    在网页开发中,jQuery 是一个...在本示例中,我们将详细探讨如何使用 jQuery 追加和删除 HTML 表格中的 `tr`(表格行)元素。 首先,确保在页面中引入了 jQuery 库。在示例代码中,我们看到以下引入语句: ```html ...

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

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

    JQuery操作tr和td内容的方法实例

    jQuery是目前在网页前端开发中广泛...以上就是根据文档标题、描述及部分内容提炼的关于JQuery操作表格中tr和td内容的方法实例的知识点。在实际应用中,这些操作非常基础但实用,是网页前端开发不可或缺的一部分技能。

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

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

    jquery动态添加删除

    通过以上分析,我们可以看到,使用jQuery进行动态添加和删除表格行的操作非常简便。这种技术不仅提高了网页的交互性,也为数据的动态管理提供了可能。开发者只需要掌握基本的选择器、事件绑定和DOM操作方法,就能...

    jQuery自定义添加删除表格行内容特效.zip

    本项目“jQuery自定义添加删除表格行内容特效”是基于jQuery实现的一种交互式功能,它允许用户动态地在表格中添加和删除行,大大提升了用户体验。下面将详细介绍这一功能的实现原理和关键代码。 首先,我们需要理解...

    jQuery实现html table行Tr的复制、删除、计算功能

    - 然后将克隆出来的行(tr)使用appendTo("#tb")方法追加到id为tb的表格中。 - 此外,还可以使用insertBefore("#tbtr:last")方法将克隆的行添加到最后一行之前。 - 此操作示例演示了如何复制一个现有的表格行,并将...

    jQuery实现动态添加tr到table的方法

    5. **创建新行**:使用jQuery的字符串拼接和`$()`函数创建一个新的`&lt;tr&gt;`元素,其中包含用户输入的数据以及一个用于删除的链接。`&lt;tr&gt;`元素被存储在变量 `$tr` 中。 6. **添加到表格**:`$("#usertable").append($...

    利用jquery给指定的table动态添加一行、删除一行的方法

    今天在项目中,刚好用到给指定的table添加一行、删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复...

    表格动态追加、插入、删除行

    动态追加、插入和删除行是用户界面交互中的基本功能,可以极大地提升用户体验。这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容,但我们可以根据这...

    Jquery针对tr td的一些实用操作方法(必看篇)

    从给定的文件信息中,我们可以提取到关于JQuery操作table中的tr和td的四个实用知识点,具体分析如下: 第一个知识点:清空tr中的内容 在JQuery中,如果需要清空一个具有特定id的tr元素里的所有td元素,我们可以使用...

    jquery案例,为表格动态添加行

    除了基本的添加和删除行操作,还可以结合其他jQuery方法和函数实现更复杂的功能,如数据验证、异步加载等。例如,可以使用`.serializeArray()`序列化表格数据,便于与服务器交换信息;或者使用`.clone()`复制行,...

    Jquery对于Table的操作一些源码

    jQuery提供了便利的方法来遍历表格的行(tr)和单元格(td)。`$('table tr').each(function() {...})`可以遍历所有表格行,而`$('td', this).each(function() {...})`可以在每个行内部遍历单元格。在循环体中,`...

    Jquery_学习笔记.zip

    这篇“Jquery_学习笔记.zip”压缩包显然包含了一位开发者的学习过程,重点是使用jQuery来实现自定义功能,如追加和删除数据行,同时结合了Layui前端框架。Layui是一款轻量级且功能丰富的前端UI框架,它提供了丰富的...

    jquery入门之动态表格---动态添加删除一行

    本教程将重点讲解如何使用jQuery实现动态表格,包括动态添加和删除表格行的功能。 首先,我们需要了解HTML表格的基本结构。一个简单的表格由`&lt;table&gt;`标签开始,`&lt;tr&gt;`表示表格行,`&lt;th&gt;`定义表头单元格,而`&lt;td&gt;`...

    用JQuery实现table按列分组(简单常用

    在JQuery中实现table按列分组,主要涉及对DOM元素的操作和数据处理。下面我们将介绍两种方法:基于列索引和基于列name值进行分组。 1. **基于列索引分组** 基于列索引的方法是根据表格(`&lt;table&gt;`)中每一行(`&lt;tr...

    jquery对table中各数据的增加、保存、删除操作示例

    在处理HTML表格(table)数据时,jQuery提供了诸多方法和选择器来实现数据的增加、保存和删除操作。 首先,在前端页面中处理数据的增、删、改操作可以有效地减少服务器端的负担。在很多情况下,页面上的数据是用户...

    jquery增加和删除元素的方法

    标题《jquery增加和删除元素的方法》和描述《主要介绍了jquery增加和删除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以参考下》为我们明确了文章将要介绍的核心内容是关于jQuery库中用于元素增删的...

    jQuery个人总结

    - **API 对比**:与原生 JavaScript 相比,jQuery 提供了一套更加简洁和易于使用的 API。例如,使用原生 JavaScript 获取元素的方式为 `document.getElementById('elementId')`,而在 jQuery 中则简化为 `$('#...

Global site tag (gtag.js) - Google Analytics