jQuery改变table中的行元素位置
    //得到table中子元素tbody中的所有tr的jQuery对象数组trs
        var trs = $("#tableid > tbody").find("tr");
        //遍历trs
        for (var i = trs.length - 1; i >= 0; i--) {
            //取第i个tr的jQuery对象
            var tr = trs.eq(i);
            //获取pid的属性值
            var pid = tr.attr("pid");
            if(pid != 0){
                tr.addClass("trbg");
                    //这句话我是这样理解的,$("#id")选择器来选出所有id=id的元素,并且pid作为变量,即之选出id=pid的元素
                $("#id" + pid).after(tr);
            }
        }
        请问,当元素进行插入后,第二次遍历的对象是移动前的还是移动后的啊,求大神解惑?????
0

2个回答

移动前的对象,因为每次插入后,你没有更新遍历的行  trs = $("#tableid > tbody").find("tr");所以trs始终是最初获取的行
而且你上面的写法可以简洁一些:
<script>
    //遍历id为"tableid"的table中的所有行tr
        $("#tableid tr").each({
            var pid=$(this).attr("pid");//依次获取每行的pid属性值
            if(pid!=0){
                $(this).addClass('trbg');//为当前行添加背景样式
                $("#id" + pid).after($(this));//在指定元素id为'id'+pid元素后插入当前行
            }
        })
    </script>
0

获取trs用楼上的方法trs = $("#tableid tr");
你是从最后一行到第一行遍历,

//取第i个tr的pid的属性值;
var tr = trs.eq(i);
var pid = tr.attr("pid");

就是把当前遍历到的tr放在一个id=idpid (pid为当前tr的pid的值)的后面。
$("#id" + pid).after(tr);

第二遍遍历的时候是移动后的对象,因为tr都被移走了,可能第二次遍历的时候 trs的length为0

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js控制table中tr位置互换
function doit(f, t) {         $("#tbl tr:nth-child(" + f + ")").insertAfter($("#tbl tr:nth-child(" + t + ")"));     }     1     2     3     4
jQuery学习心得----鼠标经过时改变table行的背景色
学习了jQuery选择器,下面给大家一个关于选择器的例子,注释很详细,大家可以自己体会。                 Title     .tr1{background-color: #FF9933;}     $(function(){         //$("#tb tr")--选择id为tb的table,再选择该table的行tr
js调整table行的上下顺序
具体代码:         Table test   type="text/css">     td { text-align:center;font-size:12px;padding:3px;}   -->     type="text/javascript
jquery sortable实现table拖拽排序,更新时只更新受影响的行
最开始使用时,我是参考这篇文章: http://www.oschina.net/code/snippet_203508_7090 可以点击“全屏查看所有代码”,可以看得更清楚。1、引入:jQuery文件和jquery-ui.js<script src="@{'/public/javascripts/jquery-1.11.1.min.js'}" charset="UTF-8"></script>
jQuery实现table中的tr上下移动并保持序号不变
jQueryMoveTr.html代码如下:     jQuery-bhang                                                aaaaaaaaaa             @@@@@@@              &nbsp;             注释1
使用jQuery和jQuery UI拖动table中的tr元素,改变tr元素的顺序
在使用table制作目录时,会遇到调整目录顺序的问题; 或者在使用table显示数据时,通过改变table中数据的顺序,使得两条不相邻的数据相邻,对比数据信息。 那么,通过什么方法,能够拖动table中tr元素呢? 本文使用jQuery和jquery UI框架中的函数,通过鼠标拖动tr,改变tr的顺序。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;g...
jQuery如何追加tr到table中任意位置--向Table中指定位置添加tr或td(jQuery)
jQuery 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 $(function(){     $("#btn1").click(function() {
javascript实现Table行和列的拖动
Table表格拖动, 既可以拖动行,也可以拖动列。代码如下:   &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; .resizeDivClass { position:relative; width:4; z-index:1; left:expression(this.parentElement.offsetW...
jQuery获取table当前所在行
$("div tbody tr").click(function() {          var rows = $(this).prevAll().length + 1;//行号    alert(rows );   }); //获取表的总行数 tr $("#tableid").find("tr").length ; //获取所在行的行号 $(this)
jquery根据table某一格的内容修改整行的css
table部分内容如下:             进度                   未开始     进行中     已完成                       此处使用了struts2中的s:iterator遍历获取request中的数据并显示在table中,之后由s:if进行判断,根据获得的数字显示表格中内容,这一
jQuery 点击table一行 并对当前行的某一列进行修改
三种:table行列中只有数据,嵌入input/select/等标签,级联修改最后一列数据当前行当前列中只有数据jswindow.onload=function(){ //焦点离开事件 //也可以是click事件 $('tr').focusout(function(){ //获取当前点击的行的**子节点(列)**中的数据 //0表示第一列 var data1=$(this).
jquery删除当前行并重置其他行编号;eq()
$(function () { $('input[name=btnDel]').click(function () { var trNode = $(this).parent().parent(); $($(this).parent().parent().nextAll("tr")).each(function () { var a = $(this).find("td").eq(0).t
table的td整列拖动交换以及重新排列位置
本javascript软件主要功能是任意拖动html的table的td来整行交换位置。
table列排序、列拖动、列宽度变化、行交换
实现table的行中元素大小排序、行变换、列位置拖动以及列宽度的拖动
js拖动table行tr排序
实现手动拖动html table中的行(tr)进行排序. HTML 需要引入jquery和jquery ui的js文件 table id="sort" class="grid" title="Kurt Vonnegut novels"> thead> tr>th class="index">No.th>th>Yearth>th>Titleth>th>G
jquery 怎么样实现,点击一个表格(table)的 tr 时改变其背景颜色
jquery实现点击一个表格(table)的 tr 时改变其背景颜色,点击下一个tr时,上一个tr背景变回原来的背景,当前点击的这个tr背景改变。 var pre;//原来的节点,假设原来的背景颜色为白色,点击变为#e6f0fc function selectArow(sObject) { $(sObject).attr(&quot;style&quot;,...
使用jquery交换两行内容(实现行移动)
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">չjQueryfunction exchangeRow(row1,row2){  if (row1.attr("tagName") == "TR" && row2.attr("tagName") == "TR" &&      row1.children("td").lengt
CSS设计表格(中)--jQuery实现删除指定行
前言    上一节,利用CSS实现了一个样式表格,增加了全选功能,本节利用jQuery实现删除指定行功能。如下效果图:     实现代码    table3.html内容    Table删除行 body{margin: 0;} .main{ width: 600px; margin-top: 10px; margin-l
JQuery实现table中tr上移下移
表格样式<table> <tr> <td><input type="button" value="上移" onclick="moveUp(this)"/></td> <td><input type="button" value="下移" onclick="moveDown(this)"/></td> </tr> <tr>
jquery获得table当前行中的所有内容
function getTd(obj){ var td = $(obj).parents('tr').children('td'); td.eq(0).find("select").val(); td.eq(1).find("select").val(); td.eq(2).find("select").val(); //下拉列表使用 td.eq(3)
jQueryUI拖拽效果_拖拽div的值到table表格里面
jQueryUI拖拽效果_拖拽div的值到table表格里面,jQueryUI拖拽效果_拖拽div的值到table表格里面(html)
jquery 自定义插件(操作table、编辑table、表头拖动、隔行换色等.....),可按需求配置,在加一个可拖动的DIV代码 ...
open-open.com 看到N多老外写的插件 于是今天看了下jquery文档也自己来两个,献丑啦! 需求: 一:操作table 1、无侵入式可编辑 2、隔行换色 3、拉动表头,自定义宽度 4、可编辑 5、编辑后的数据颜色区分 5、css文件自己定义,无需和插件绑定,这样更加灵活 6、一切可配置 1:名字就叫bestTable ...
jquery移动元素位置
ele.parent() : 获取一个元素的临近的父级 ele.prev() :获取在其上面的临近兄弟节点 ele.next() :获取在其下面的临近的兄弟节点 ele.before(): 设置元素的前一元素是什么 ele.after():设置元素的后一元素是什么 js: $(document).ready(function(){
JQ实现效果:奇偶行颜色不同,单项选择和多项选择
1、表格变色 $('tbody>tr:odd').addClass('odd'); $('tbody>tr:even').addClass('even');2、单项选择列表radio $('tbody>tr').click(function() { $(this).addClass('selected').siblings().removeClass('sele
jquery如何改变元素的定位函数格式
首先前提:(*该元素已设置相对或绝对定位* )  只有设置定位的元素才能激活定位,再来改变定位 $(  "元素对象"  ).css ( "定位的方向","定位的值"); 例如:图片轮播时第一张和最后一张的无缝连接问题,第一张点击事件触发就先给最后一张定位到第一张前面 $( "li:last-child).css( "left" , "100%" ); 定位后再写动画animate();函数
javascript与jquery 控制表格行的字体与背景色
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt; window.onload=function(){ var table=document.getElementById(&quot;tb&quot;); var tboby=table[0]; var trs=document.getElementsByTagName(&quot;tr&quot;)...
jquery 动态增加table元素
jsp页面 [code=&quot;java&quot;] ${pageTitle } ${pageTitle } ...
Jquery获取table中的行和列以及列中对象方法
 $('#MyTable tr').eq(2) ; 或者$('#MyTable tr:eq(2)'); tr上移下移 $('#MyTable tr:eq(2)').insertBefore('#MyTable tr:eq(1)'); 把第三个tr移到第二tr前面   &amp;lt;script type=&quot;text/javascript&quot; src=&quot;jq.js&quot;&amp;gt;&amp;lt;/scri...
jquery 实现表格行的上下移动和置顶
先上效果图: 点击上移、下移、置顶,可以实现对应的效果。 上代码:<td> <a href="javascript:" data-opt="delete" class="layui-btn layui-btn-mini layui-btn-danger">删除</a> {{# if(index > 0){ }} //layui的模板语法
Jquery实现table 1.拖拽选中(支持滚动) 2.定位到指定行 3.查看选中的选项
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt; &amp;lt;title&amp;gt;table&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt;
jquery点击table行 变颜色
$("#tbody3  tr").mouseover(function () {                     $(this).css("background-color", "#FFE8FF");                 });                 $("#tbody3  tr").mouseout(function () {                
使用JQuery修改Table特定行的相关属性
一个简单的小问题,有如下一个表格:<table border="1" id="history"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td>
Jquery删除表格除第一行和最后一行之外的所有行
$("#tableId tr:not(:first):not(:last)").html("");其中#tableId为表格的id或者是$("#tableId tr:not(:first):not(:last)").empty("");
bootstrap table当前行 上移 下移
var operateEvents = { 'click .up': function (e, value, row, index) { //点击上移 var $tr = $(this).parents("tr"); if ($tr.index() == 0||$tr.index() == 1){ alert("首行
jquery操作元素的位置
获取页面某一元素的绝对X,Y坐标,可以用offset(): var X = $(‘#DivID’).offset().top; var Y = $(‘#DivID’).offset().left; 获取相对(父元素)位置: var X = $(‘#DivID’).position().top; var Y = $(‘#DivID’).position().left; 通过getBounding...
jquery实现table动态添加行、删除行以及行的上移和下移
jQuery实现table动态添加行、删除行以及行的上移和下移
jquery获取table当前行的内容,table所有内容
jquery获取table当前行的内容
jquery删除table的某一行元素 删除前confirm确认
table删除数据后移除,删除前confirm()确认
jQuery_review之table中根据行选中,进行背景变色和radio选中
在各种WEB系统中经常可以看到类似的操作,点击中列表的某一行,然后当前行就会变成其他的颜色,并且其中的radio就会被选中。并且一般还会鼠标滑过的时候的动态特效,比如鼠标滑过当前行的时候会有一个变色的样式。趁着复习jQuery的机会,看一下使用jQuery来实现这个功能的步骤。    在这个功能当中,有一个需要注意的小知识点:如何增加一个radio?在HTML中,增加一个HTML
jQuery获取table当前所在行和列
$(&quot;.event-TDclick&quot;).click(function() { $(this).toggleClass(&quot;onClasss&quot;); var tdSeq = $(this).parent().find(&quot;td&quot;).index($(this)[0]); var trSeq = $(this).par...
文章热词 jQuery学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 nlp课程改变 大数据改变教育