`

JQuery获取当前元素的上下元素 向Table 添加行

 
阅读更多

 

$(this).next('select').val();

$(this).prev('select').val();

next获取当前点击元素的下一个元素

prev获取当前点击元素的上一个元素

 

jQuery.parent(expr)           //找父元素

jQuery.parents(expr)          //找到所有祖先元素,不限于父元素

jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙

jQuery.contents()            //查找下面的所有内容,包括节点和文本。

jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll()             //查找所有之前的兄弟节点

jQuery.next()                //查找下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll()             //查找所有之后的兄弟节点

jQuery.siblings()            //查找兄弟节点,不分前后

jQuery.find(expr)            //跟jQuery.filter(expr)完全不一样,jQuery.filter(expr)是从初始的

                          jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集中

                          筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如:

                          $("p").find("span")是从元素开始找,等于$("p span")

 

所谓内部插入,就是把内容直接插入到指定的元素内部。

1. append()

append()方法与DOM 的appendChild()方法功能类似,都是在元素内部增加子元素或文本。例如,append()方法将把 HTML 源代码插入到 div 元素内部,但是插入内部不会覆盖该元素已经存在的内容,且它会自动位于原内容的末尾。

        与DOM 中appendChild()方法不同的是:jQuery 中的append()方法能够同时为jQuery 对象中多个元素增加内容,所增加的内容不需要先定义成节点,可以直接把它作为字符串插入到元素内。

另外,jQuery 还定义了一个反操作的方法——appendTo(content),它可以把所有匹配的元素追加到另一个指定的元素集合中。

2. prepend()

        prepend()方法与 append()方法作用相同,都是把指定内容插入到 jQuery 对象元素中,但是prepend()方法能够把插入的内容放置在最前面,而不是放置在最末尾。

        与 appendTo()方法相对应的是 prependTo(),该方法能够把所有匹配的元素前置到另一个指定的元素集合中。

append()、appendTo()、prepend()和prependTo()是相互联系,且操作紧密的四个方法,它们都能够实现内部插入,只是操作的方向和位置略有不同。

Note :他们所需要的参数也是一样的。

              append()和prepend() 需要: jQuery对象,也可接受html代码,和DOM对象

              appendTo()和prependTo() 需要:选择器,也可以是jQuery对象集合,也可是DOM对象。但调用此方法的必然是JQuery对象

 

所谓外部插入,就 是把内容插入到指定jQUery对象相邻元素内。

与 内部插入操作基本类似,外部插入也包含四种方法。

after(content):在每个匹配的元素之后插入内容。
before(content):在每个匹配的元素之前插入内容。
insertAfter(content):把所有匹配的元素插入到另一个指定的元素或元素集合的后面。
insertBefore(content):把所有匹配的元素插入到另一个指定的元素或元素集合的前面。

例如,在下面示例中使用after()方法把 p 元素插入到div元素的后面,相当于颠倒两个元素的排列顺序。// 移动元素

 

 

分享到:
评论

相关推荐

    jquery table 上下行移动互换

    // 获取当前行的前一行 if ($prevRow.length > 0) { // 如果有前一行 $prevRow.insertBefore($thisRow); // 将前一行插入到当前行之前 } }); // 针对每个下移按钮 $('.moveDown').click(function() { var ...

    jQuery实现table上移下移和置顶

    本主题将详细探讨如何使用jQuery实现表格(table)中的行上移、下移和置顶功能,这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前,确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用: ...

    运用jquery技术实现表格元素的上下移动

    在本教程中,我们将深入探讨如何利用jQuery技术实现表格(table)元素的上下移动,以此来改变表格行(tr)的顺序,以满足用户自定义排序的需求。 首先,我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...

    jquery 实现上下移动元素排序无刷新

    本教程将探讨如何利用jQuery实现元素上下移动的排序功能,且在用户操作过程中无需页面刷新,提供流畅的用户体验。同时,我们还将讨论如何通过Ajax技术同步更新后台数据库中的排序信息。 ### 1. jQuery基本概念 ...

    jquery实现上下移动

    在本场景中,我们可能需要获取当前选中的行: ```javascript var selectedRow = $('tr.active'); // 假设tr有.active类表示选中 ``` 四、改变元素顺序 在jQuery中,可以使用`.prev()`和`.next()`方法来获取元素的...

    jquery做的table行上下移动,排序, 用户名验证,js读取xml

    本文将深入探讨jQuery如何实现表格(table)行的上下移动、排序功能,以及用户名验证和JavaScript读取XML的技术细节。 一、jQuery实现表格行上下移动 在网页中,表格常常用于展示结构化数据。jQuery可以通过获取...

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...

    方向键盘控制table内的input标签焦点

    2. **选中table内的所有input**:使用jQuery的选择器选取表格内的所有`<input>`元素,并为它们添加初始的焦点事件处理。 ```javascript $(document).ready(function() { var inputs = $('table input'); inputs....

    jquery调整表格行tr上下顺序实例讲解

    down函数的逻辑类似,但它查找的是当前行的下一个同级元素(nextTR),如果存在,则将这个元素移动到当前行的前面。 这里的移动操作是通过insertAfter()和insertBefore()两个jQuery方法来实现的。insertAfter()方法...

    JS控制HTMLDOM表格行上下移动

    标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM(Document Object Model)元素,特别是HTML表格的行(tr)进行上下移动的功能。这种功能常见于数据管理界面,允许用户通过交互调整...

    jQuery实现table中的tr上下移动并保持序号不变的实例代码

    在本文中,我们将深入探讨如何使用jQuery来实现表格(table)中tr元素的上下移动功能,同时保持表内的序号不变。这个实例适用于那些需要动态调整数据顺序的Web应用程序,例如,用户可以通过点击按钮轻松地调整列表项...

    Jquery实现上下移动和排序代码

    - 在事件处理函数中,获取当前元素及其相邻元素。 - 根据按钮的功能,使用Jquery方法交换元素的位置,或者修改元素的样式使其上下移动。 - 如果需要对排序后的顺序进行保存,则可能涉及异步请求(Ajax)将新顺序...

    Jquery实现的table最后一行添加样式的代码

    `th.end` 是为表头的最后一行添加特别的边框,即上下两个边框都用较亮的颜色。 接下来,我们要使用 `jQuery` 来定位并添加样式到表格的最后一行。以下是一个基本的 `jQuery` 示例,展示了如何实现这一功能: ```...

    table支持键盘上下键

    2. **获取当前焦点**:当`keydown`事件触发时,需要获取当前被聚焦的表格单元格(td),这可以通过`document.activeElement`或`document.querySelector(':focus')`实现。 3. **判断按键方向**:通过比较键盘事件的`...

    js表格无缝滚动效果

    5. **模拟无缝滚动**:在判断到表格滚动到底部后,不是立即加载新的数据,而是先保存当前表格的DOM结构,然后移除表格的所有子元素,接着将之前保存的DOM结构重新插入表格,最后添加新的数据。这样,用户会感觉表格...

    利用JS+CSS实现滚动表格数据展示

    这可以通过计算视口高度、表格行的高度以及当前位置来实现。 总结来说,通过结合JavaScript和CSS,我们可以创建一个既美观又实用的滚动表格,以适应网页中大量数据的展示需求。这不仅提高了数据的可读性,还优化了...

    able_select行选中

    6. 交互优化:为了提供更好的用户体验,可以添加键盘导航功能,让用户能够通过上下键来切换选中行,或者使用Ctrl/Cmd键进行多选。 7. 数据操作:选中的行通常会触发一些业务逻辑,如删除、编辑或导出所选数据。这...

    Java学习阶段的前端知识整理

    - DOM操作包括获取元素(`getElementById`, `getElementsByClassName`, `getElementsByTagName` 等)、添加/删除/修改元素内容。 - jQuery 是一个流行的JavaScript库,简化了DOM操作,如 `$()` 用于选择元素,`.each...

    CSS3扁平风格价格表样式代码.zip

    - **AJAX**:可能使用jQuery的`.ajax()`方法获取实时更新的价格信息,实现数据的异步加载。 HTML5同样起着关键作用,其新引入的语义化标签如`<section>`、`<article>`、`<header>`和`<footer>`能帮助结构化页面内容...

    基于jquery实现的表格分页实现代码

    6. 代码结构与模块化:在给出的内容中可以看到,表格的HTML结构使用了`<table>`元素,并且每一列的表头都附加了排序功能(通过鼠标悬停时显示的上下箭头)。这表示实现分页功能的同时,还可以提供列排序的功能。同时...

Global site tag (gtag.js) - Google Analytics