Michael, thank you very much
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I find the bug, the last <tr> should be </tr>.
$("#tb_video").append('<tr><
td><input type="checkbox" /></td><td>' + d.name + '</td><td>' + d.len +
'</td><td>' + d.size + '</td><tr>');
this bug trouble me more than 2 days, thank you again, you not only give a
good tools which aid me to find the bug, also you show me a way to find bug
!
I kill another bug use View Source Chart less than 2 minute which trouble
me in a long time too.
Thank You !!!
2009/12/9 Michael Geary <m...@mg.to>
> 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>
>>>>>
>>>>
>>>>
>>>
>>
>
