Hi Eric, Please forgive me for not explaining clearly.
Here is what I meant by a "test page": post your HTML page on a website somewhere and give us the URL to that page. Then we can click the link and load your page, just like any other web page. That makes it much easier to help you troubleshoot. Here, since I didn't explain myself well, I went ahead and uploaded your files to my own site: http://mg.to/test/zhong/OK.html http://mg.to/test/zhong/Error.html Now when I load the page I can see the strange behavior you noticed. I also noticed that the two pages display slightly differently from each other. Do you see how the Error page has more spacing between the rows than the OK page? This made me think there is something different in the dynamically generated code. To find the difference, I used the View Source Chart extension for Firefox: https://addons.mozilla.org/en-US/firefox/addon/655 along with the Araxis Merge file comparison program: http://www.araxis.com/ I opened your OK.html file in Firefox and selected View Source Chart from the View menu. I also opened a new file comparison window in Araxis Merge. (Araxis Merge is an excellent but fairly expensive commercial product. You could use any file comparison or "diff" program, though.) Then I did a "select all" and "copy", and pasted the result into the left panel in Araxis Merge. I did the same thing with your Error.html file and pasted the result into the right panel in Araxis Merge. This showed me the difference between the straight HTML version and the JavaScript-generated version. I saved the comparison report here for you to look at: http://mg.to/test/zhong/compare.html Scroll down in that page and take a look around line 116 on the left, line 256 on the right. Do you see the extra </tr> and <tr> tags there, and the same thing in the lines below that? In the JavaScript-generated version, there is an *extra* empty table row in between each of your table rows. This is why your up and down buttons are acting strangely. They probably *are* moving the table row(s) up and down as expected, but those empty table rows are interfering with that. I'm sure if you get rid of the empty rows it will work as you want. This also explains why there is a small difference in layout between the two versions. Do you see where the JavaScript version has more spacing between the rows (at least in Firefox)? That is caused by the empty rows. I'll let you sort out what part of your JavaScript code is causing those extra rows to be added. Hope that helps, -Mike On Tue, Dec 8, 2009 at 1:59 AM, Eric Zhong <ericiszhongwen...@gmail.com>wrote: > thanks for your reply, my english is poor , i can't understand what is > "test page", you meant src file or description for the result ??? > > > description: > 1. when you use HTML code, it runs well , you can select one or more > select box and click up or down button, the selected line will up and down > immediately. > 2. but when you use jQuery to append() the code , you do the same action , > the selected line, will move or not some times, and when you multiselect > lines, you will see the strange result, it's hard to say with my poor > english, sorry !!! > > i attach 2 files, one is OK, and another is Error. you can run it (double > click) , and to opt and to see what difference. > > > 2009/12/8 Michael Geary <m...@mg.to> > > Eric, you really need to put up a test page so we can try actually loading >> it. Otherwise it's too hard to tell what might be wrong. I'm not even sure >> what the problem is we're supposed to be looking at! >> >> -Mike >> >> >> On Mon, Dec 7, 2009 at 11:44 PM, Eric Zhong >> <ericiszhongwen...@gmail.com>wrote: >> >>> i have modified the code , but the result is the same, even if i write >>> this in one line !!! Help !!! >>> >>> one line version: >>> ==================================================================== >>> >>> >>> <html> >>> <head> >>> <script src=" >>> http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js";></script> >>> <SCRIPT LANGUAGE="JavaScript"> >>> <!-- >>> $(function(){ >>> // /* >>> var html_video ='<table id="tb_all" width="724px"><tr><td >>> valign="top"><table id="tb_video" class="tb_width"><tr >>> class="tb_head"><td> </td><td>filename</td><td>len(s)</td><td>size(KB)</td></tr></table></td></tr></table>'; >>> >>> $("body").append( html_video ); >>> >>> var data = >>> [ >>> {name: "1", len: "432", size: "321"}, >>> {name: "2", len: "54543", size: "432"}, >>> {name: "3", len: "3243", size: "432"}, >>> {name: "4", len: "543", size: "432"}, >>> {name: "5", len: "543", size: "654"}, >>> {name: "6", len: "654", size: "654"}, >>> {name: "7", len: "765", size: "654"}, >>> {name: "8", len: "765", size: "765"}, >>> {name: "9", len: "53", size: "654"} >>> ]; >>> >>> var a = data; >>> if ( a != null ){ >>> for(var i=0; i<a.length; i++){ >>> var d = a[i]; >>> $("#tb_video").append('<tr><td><input type="checkbox" >>> /></td><td>' + d.name + '</td><td>' + d.len + '</td><td>' + d.size + >>> '</td><tr>'); >>> } >>> } >>> >>> $("#tb_video").closest("tr").append('<td width="80px" >>> align="center" style="vertical-align:top"><input id="pl_bt_up" type="button" >>> value="↑" /><input id="pl_bt_down" type="button" value="↓" /></td>'); >>> // */ >>> $("#pl_bt_up").click(function() { >>> var $all = $("#tb_video tr"); >>> var $trs = $("#tb_video tr:has(input:checked)"); >>> if( $all.index($trs.get(0)) != 1 ){ >>> $trs.each(function(){ >>> $(this).prev().before($(this)); >>> }); >>> } >>> }); >>> >>> $("#pl_bt_down").click(function() { >>> var $all = $("#tb_video tr"); >>> var $trs = $("#tb_video tr:has(input:checked)"); >>> >>> if( $all.index( $trs.get($trs.length-1) ) != >>> $all.length-1 ){ >>> for( i = $trs.length-1; i>=0; i-- ) { >>> var $item = $( $trs.get(i) ); >>> $item.insertAfter($item.next()); >>> } >>> } >>> }); >>> }); >>> --> >>> </SCRIPT> >>> </head> >>> <body> >>> <!-- >>> <table id="tb_all" width="724px"> >>> <tr> >>> <td valign="top"> >>> <table id="tb_video" class="tb_width"> >>> <tr class="tb_head"> >>> <td> </td> >>> <td>filename</td> >>> <td>len(s)</td> >>> <td>size(KB)</td> >>> </tr> >>> <tr><td><input type="checkbox" >>> /></td><td>1</td><td>222</td><td>432</td></tr> >>> <tr><td><input type="checkbox" >>> /></td><td>2</td><td>333</td><td>543</td></tr> >>> <tr><td><input type="checkbox" >>> /></td><td>3</td><td>444</td><td>654</td></tr> >>> <tr><td><input type="checkbox" >>> /></td><td>4</td><td>555</td><td>765</td></tr> >>> <tr><td><input type="checkbox" >>> /></td><td>5</td><td>666</td><td>876</td></tr> >>> <tr><td><input type="checkbox" >>> /></td><td>6</td><td>777</td><td>432</td></tr> >>> <tr><td><input type="checkbox" >>> /></td><td>7</td><td>888</td><td>543</td></tr> >>> <tr><td><input type="checkbox" >>> /></td><td>8</td><td>999</td><td>265</td></tr> >>> </table> >>> </td> >>> <td width="80px" align="center" style="vertical-align:top"> >>> <input id="pl_bt_up" type="button" value="↑" /> >>> <input id="pl_bt_down" type="button" value="↓" /> >>> </td> >>> </tr> >>> </table> >>> --> >>> </body> >>> </html> >>> >>> ==================================================================== >>> >>> >>> >>> 2009/12/8 seasoup <seas...@gmail.com> >>> >>> javascript cant read strings over line breaks. >>>> >>>> $("#tb_video").append(' \ >>>> > <tr> \ >>>> > <td><input >>>> > type="checkbox" /></td> \ >>>> > <td>' + d.name + '</td> \ >>>> > <td>' + d.len + '</td> \ >>>> > <td>' + d.size + '</td> \ >>>> > <tr> '); >>>> >>>> must be >>>> >>>> $("#tb_video").append('<tr>'+ >>>> > '<td><input >>>> type="checkbox" /></td>'+ >>>> > '<td>' + d.name + >>>> '</td>'+ >>>> > '<td>' + d.len + '</td>'+ >>>> > '<td>' + d.size + '</td>'+ >>>> > '<tr> '); >>>> >>>> On Dec 7, 6:30 pm, Eric Zhong <ericiszhongwen...@gmail.com> wrote: >>>> > <html> >>>> > <head> >>>> > <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ >>>> > jquery.js"></script> >>>> > <SCRIPT LANGUAGE="JavaScript"> >>>> > <!-- >>>> > $(function(){ >>>> > // /* >>>> > var html_video = ' \ >>>> > <table id="tb_all" width="724px"> \ >>>> > <tr> \ >>>> > <td valign="top"> \ >>>> > <table id="tb_video" >>>> > class="tb_width"> \ >>>> > <tr class="tb_head"> \ >>>> > <td> </td> \ >>>> > <td>filename</td> \ >>>> > <td>len(s)</td> \ >>>> > <td>size(KB)</td> \ >>>> > </tr> \ >>>> > </table> \ >>>> > </td> \ >>>> > </tr> >>>> \ >>>> > </table>' >>>> > >>>> > $("body").append( html_video ); >>>> > >>>> > var data = >>>> > [ >>>> > {name: "1", len: "432", size: "321"}, >>>> > {name: "2", len: "54543", size: >>>> "432"}, >>>> > {name: "3", len: "3243", size: "432"}, >>>> > {name: "4", len: "543", size: "432"}, >>>> > {name: "5", len: "543", size: "654"}, >>>> > {name: "6", len: "654", size: "654"}, >>>> > {name: "7", len: "765", size: "654"}, >>>> > {name: "8", len: "765", size: "765"}, >>>> > {name: "9", len: "53", size: "654"} >>>> > ]; >>>> > >>>> > var a = data; >>>> > if ( a != null ){ >>>> > for(var i=0; i<a.length; i++){ >>>> > var d = a[i]; >>>> > $("#tb_video").append(' \ >>>> > <tr> \ >>>> > <td><input >>>> > type="checkbox" /></td> \ >>>> > <td>' + d.name + '</td> \ >>>> > <td>' + d.len + '</td> \ >>>> > <td>' + d.size + '</td> \ >>>> > <tr> '); >>>> > } >>>> > } >>>> > >>>> > $("#tb_video").closest("tr").append(' \ >>>> > <td width="80px" align="center" >>>> > style="vertical-align:top"> \ >>>> > >>>> <input id="pl_bt_up" type="button" value="↑" /> \ >>>> > >>>> <input id="pl_bt_down" type="button" value="↓" /> >>>> > \ >>>> > </td> '); >>>> > // */ >>>> > $("#pl_bt_up").click(function() { >>>> > var $all = $("#tb_video tr"); >>>> > var $trs = $("#tb_video tr:has(input:checked)"); >>>> > if( $all.index($trs.get(0)) != 1 ){ >>>> > $trs.each(function(){ >>>> > $(this).prev().before($(this)); >>>> > }); >>>> > } >>>> > }); >>>> > >>>> > $("#pl_bt_down").click(function() { >>>> > var $all = $("#tb_video tr"); >>>> > var $trs = $("#tb_video tr:has(input:checked)"); >>>> > >>>> > if( $all.index( $trs.get($trs.length-1) ) != >>>> > $all.length-1 ){ >>>> > for( i = $trs.length-1; i>=0; i-- ) { >>>> > var $item = $( $trs.get(i) ); >>>> > $item.insertAfter($item.next()); >>>> > } >>>> > } >>>> > }); >>>> > }); >>>> > --> >>>> > >>>> > </SCRIPT> >>>> > </head> >>>> > <body> >>>> > <!-- >>>> > <table id="tb_all" width="724px"> >>>> > <tr> >>>> > <td valign="top"> >>>> > <table id="tb_video" class="tb_width"> >>>> > <tr class="tb_head"> >>>> > <td> </td> >>>> > <td>filename</td> >>>> > <td>len(s)</td> >>>> > <td>size(KB)</td> >>>> > </tr> >>>> > <tr><td><input type="checkbox" /></td><td>1</ >>>> > td><td>222</td><td>432</td></tr> >>>> > <tr><td><input type="checkbox" /></td><td>2</ >>>> > td><td>333</td><td>543</td></tr> >>>> > <tr><td><input type="checkbox" /></td><td>3</ >>>> > td><td>444</td><td>654</td></tr> >>>> > <tr><td><input type="checkbox" /></td><td>4</ >>>> > td><td>555</td><td>765</td></tr> >>>> > <tr><td><input type="checkbox" /></td><td>5</ >>>> > td><td>666</td><td>876</td></tr> >>>> > <tr><td><input type="checkbox" /></td><td>6</ >>>> > td><td>777</td><td>432</td></tr> >>>> > <tr><td><input type="checkbox" /></td><td>7</ >>>> > td><td>888</td><td>543</td></tr> >>>> > <tr><td><input type="checkbox" /></td><td>8</ >>>> > td><td>999</td><td>265</td></tr> >>>> > </table> >>>> > </td> >>>> > <td width="80px" align="center" style="vertical- >>>> > align:top"> >>>> > <input id="pl_bt_up" type="button" value="↑" /> >>>> > <input id="pl_bt_down" type="button" value="↓" /> >>>> > </td> >>>> > </tr> >>>> > </table> >>>> > --> >>>> > </body> >>>> > </html> >>>> >>> >>> >> >
