jquery 删除当前行，只需传递this

最新推荐文章于 2025-03-16 22:03:15 发布
转载 最新推荐文章于 2025-03-16 22:03:15 发布 · 1.1w 阅读 · 2

本文介绍了使用JavaScript实现从HTML表格中删除指定行的两种不同方法。一种是通过获取当前点击元素的父级元素并利用jQuery的.remove()方法来完成删除操作；另一种则是通过绑定.live()事件处理器的方式实现同样的功能。

 

   <tr>
        <td>
            <input type='hidden' name='annex' value="+rs+">
            <a href='javascript:void(0);' onclick=\"download('"+rs+"')\">"+rs+"</a>
            <span onclick='deleteTr(this);' style='cursor:pointer'>&nbsp;&nbsp;删除</span>
        </td>
    </tr>

 

    //删除当前行
    function deleteTr(nowTr){
        //多一个parent就代表向前一个标签,
        //本删除范围为<td><tr>两个标签,即向前两个parent
        //如果多一个parent就会删除整个table


        $(nowTr).parent().parent().remove();
        }

 

             删除.live('click',function(){
                        $(this).parents('tr:first').remove();
                        });

             

              原文出处：http://wawa129.iteye.com/blog/1663539

       

用jQuery实现简单的增删改查操作
weixin_58983198的博客
09-02 2153
【代码】用jQuery实现简单的增删改查操作。
jQuery笔记
彳亍
11-28 740
1. 简介jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。优点： 操作起来非常方便 浏览器的兼容性很好 有大量基于jQuery的插件 1.1. 代码风格在jQuery中，不管是页面元素的选择还是内置功能函数的使用，都是用美元符号“$”来起始的。$(function(){ }); //执行一个匿名函数 $('#box');
jquery删除当前行，只需传this,即可
wawa129的专栏
08-27 543
"+rs+"&nbsp;&nbsp;删除 //删除当前行 function deleteTr(nowTr){ //多一个parent就代表向前一个标签, // 本删除范围为两个标签,即向前两个parent //如果多一...
jquery的删除方法
qq_30017619的博客
07-28 658
通过 jQuery，可以很容易地删除已有的 HTML 元素。 删除元素/内容 如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 jQuery remove() 方法 jQuery remove() 方法删除被选元素及其子元素。 实例 $("#div1").remove(); jQuery empty() 方法 jQuery empty() 方法删除被选元素的子元素。 实例 $
使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。
scscdstfxqxxzqqc的博客
03-31 3694
使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。 代码： <!DOCTYPE html> <html> <head> <title>选择框</title> <script src="../js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">
jquery删除当前行
anwei9164的博客
10-14 659
<tr><td><input type='hidden' name='annex' value="+rs+"><a href='javascript:void(0);' onclick=\"download('"+rs+"')\">"+rs+"</a><span onclick='deleteTr(this);' styl...
jQuery
weixin_45756606的博客
06-29 640
​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。​ 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。​ jQuery总体概况如下 :jQu
JQuery
weixin_45701868的博客
05-17 1752
目录 1. 什么是 JQuery 2. JQuery 特点 3. 入门程序 4. JQuery 语法 4.1.语法 4.2.说明 4.3.核心函数的功能 5. 什么是 Jquery 对象 6. 使用 jQuery 对象的优缺点： 7. 编码习惯 8. DOM 转 Jquery 对象 8.1.语法 8.2.案例 9. JQuery 转 Dom 对象 9.1.语法 9.2.案例 10. 什么是 jQuery 选择器 11. jQuery 选择器的基本语法 12. 基本选择器
jQuery事件用法实例汇总
12-03
`currentTarget`表示事件冒泡过程中的当前元素，`data`属性可以用来传递数据到事件处理函数。 除此之外，`jQuery.Event`构造函数允许我们创建自定义事件并触发它们，同时可以传递额外的数据。例如，`var e = jQuery...
jquery 发送put/delete请求
热门推荐
回家换拖鞋的专栏
08-13 1万+
typeString (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
再理解jQuery；delete原型属性
bluesky
05-13 312
以前用jQuery的时候曾粗略看了它的源码，但却不求甚解。以致一直以为jQuery()返回的是一个数组，实际上只是一个PlainObject而已。 alert({}.toString.call(jQuery())) //显示为[object Object] 现在想想也觉得自己无知。倘若真是数组，那么jQuery的设计岂不是侵入式的修改了Array的原型。这种设计并不被推荐，jQuery又怎...
jQuery的动态删除和添加
u013313232的博客
11-07 998
jQuery的动态删除和添加 <script type="text/javascript"> //在页面加载完成之后就执行 $(function () { //公用删除 var deleteFun =function () { var $delete = $(this).parent().parent(); var name = $delete.find("td:first").text(); /* * confirm确定弹窗，点击确.
用javascript删除当前行，添加行
teresa502的专栏
03-01 3013
删除行     function   del(obj)     {           obj.parentNode.parentNode.removeNode(true);     }                            单元格1                     单元格2                    单元格3                   
AJAX(二)——用jQuery写GET , POST , PUT , DELETE方法
rjlmylover_zyw的博客
02-14 637
文章目录jQuery写请求方法- GET方法- POST方法- PUT方法- DELETE方法 jQuery写请求方法 - GET方法 function getAjax() { $.ajax({ type: GET, url: https://music.benwebsite.cloud/banner, data: { type: 2 }, dataType: JSON, async: true, success: function(data) { if(data
如何在jQuery中发送PUT / DELETE请求？
p15097962069的博客
01-12 3293
GET ： $.get(..) POST ： $.post().. 那PUT/DELETE呢？
jQuery DOM操作删除（备忘录）
lyxccy的博客
03-16 623
" + inputValue + "<button class='delete'>删除</button></li>");<input id="inputText" type="text" placeholder="请输入待办事项" /><li>项目1<button class="delete">删除</button></li><li>项目2<button class="delete">删除</button>
【Java 进阶篇】JQuery DOM操作：CRUD操作的前端魔法
繁依Fanyi的博客
11-14 446
在前端开发的舞台上，CRUD（Create, Read, Update, Delete）操作是一种极为重要的技能，它涉及对页面元素的增删改查。而JQuery，这位前端开发的魔法师，为我们提供了便捷而强大的方法，使得CRUD操作变得更加轻松、愉快。在这篇博客中，我们将深入研究JQuery DOM操作中的CRUD操作，揭示这段前端魔法的神奇之处。
jQuery-表中数据的添加与删除
heliuerya的博客
05-29 1062
/appendTo() 比如：a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素。const flag = confirm("确认删除--->" + name + "<---的信息吗？//confirm()在弹窗中用户点击确定按钮返回true，用户点击取消按钮返回false。//append() 比如：x.append(y) 在x元素中添加y元素。//"td:eq(0)"表示第一个td元素。//text()获取指定元素的文本内容。//$(this)表示鼠标单击的元素。
Js /JQuery跨域：PUT/DELETE请求接口405错误；（ OPTIONS+ 地址 +405(Method Not Allowed)）
WH_13_14_0_的博客
10-25 3286
摘要：（第一次写博客，仅供参考）今天天气很好于是我做起了项目，但是BUG又**很快又来了。。。废话不说了，描述下错误：前台使用Ajaxqing请求接口（当然我用的是webapi接口），出现错误。错误如下可以参考下：    （这是我的错误信息，可以对比一下。）   努力一：（此处并未解决问题，只是尝试下） 经过百度以及身边朋友的帮助得到的是服务器端Web.config配置的问题，但是之...
js 标签this参数转jquery对象
最新发布
06-25
<think>我们正在讨论如何将JavaScript事件处理函数中的`this`参数转换为jQuery对象。在JavaScript的事件处理函数中，`this`通常指向触发事件的DOM元素。如果我们想使用jQuery的方法操作这个元素，就需要将其转换为jQuery对象。转换方法很简单：用`$()`包裹`this`即可，例如`$(this)`。例如，在一个点击事件处理函数中：```javascript$("button").click(function(){//这里的this是原生的DOM元素//转换为jQuery对象：var$this=$(this);//现在可以使用jQuery的方法，例如：$this.hide();});```这样，`$(this)`就是一个jQuery对象，可以调用jQuery提供的各种方法。注意：在jQuery的事件处理函数中，我们经常使用`$(this)`来操作当前元素。另外，如果是在其他上下文（如自定义函数）中，`this`可能不是DOM元素，需要根据实际情况判断。但在事件处理函数中，通常`this`就是触发事件的DOM元素。参考引用[^3]提到了jQuery中`$(document).ready`和`$(window).load`的区别，虽然与这个问题没有直接关系，但提醒我们注意事件绑定的时机。因此，将`this`转换为jQuery对象的方法是使用`$(this)`。下面生成相关问题：</think>### 如何将 JavaScript 事件处理函数中的 `this` 转换为 jQuery 对象？ 在 JavaScript 事件处理函数中，`this` 通常指向触发事件的 **原生 DOM 元素**。要使用 jQuery 方法操作该元素，需将其转换为 jQuery 对象。以下是具体方法： #### ✅ 转换方法 ```javascript // 在事件处理函数中： element.addEventListener('click', function() { // 将原生 DOM 元素 this 转为 jQuery 对象 const $jqObj = $(this); // 现在可调用 jQuery 方法 $jqObj.hide().addClass('active'); }); // jQuery 事件绑定写法（原理相同）： $('.btn').on('click', function() { $(this).css('color', 'red'); // this → jQuery 对象 }); ``` #### ⚠️ 注意事项 1. **箭头函数问题** 箭头函数会继承外层 `this`（通常是 `window`），**无法**获取事件元素： ```javascript // 错误示例（箭头函数） $('.btn').on('click', () => { $(this).hide(); // this 指向 window，转换失败！ }); ``` 2. **严格模式兼容性** 在严格模式中，全局函数的 `this` 为 `undefined`，但事件处理函数不受影响[^3]。 3. **性能优化** 重复转换可能影响性能，建议缓存对象： ```javascript $('.item').on('hover', function() { const $el = $(this); // 只转换一次 $el.fadeOut().delay(500).fadeIn(); }); ``` #### 💡 应用场景 - 动态修改触发事件的元素样式 - 链式调用 jQuery 方法（如 `$(this).addClass().siblings().removeClass()`） - 访问 jQuery 扩展方法（如 `$(this).data()` 获取自定义属性） --- ### 相关问题 1. **JavaScript 原生事件处理与 jQuery 事件绑定有何区别？** （涉及原生 `addEventListener` vs jQuery `on()` 的机制差异） 2. **如何解决 jQuery 事件委托中 `this` 的指向问题？** （讨论 `event.delegateTarget` 和 `event.currentTarget` 的使用场景） 3. **为什么在 AJAX 回调函数中 `this` 的指向会变化？如何固定？** （分析 `$.ajax` 上下文与 `bind()`/箭头函数的解决方案）[^2] 4. **jQuery 的 `$(this)` 和原生 `this` 在性能上有何差异？何时应优先使用原生操作？** （对比 DOM 操作效率及适用场景） 5. **如何扩展 jQuery 原型方法并在 `$(this)` 上调用？** （实现自定义插件如 `$(this).customMethod()` 的技术要点）[^4] [^1]: 参数传递时需避免 `$` 冲突，可通过传递 `window.jQuery` 解决上下文问题 [^2]: jQuery 的 AJAX 配置会扩展 `ajaxSettings` 对象，影响回调函数的 `this` 指向 [^3]: `$(document).ready()` 与 `$(window).load()` 的 `this` 指向有本质区别 [^4]: 通过扩展 `jQuery.fn` 实现自定义方法后，可在 `$(this)` 上直接调用
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值