[jQuery] The target HTML code works very well, but append() not !!!

Mon, 07 Dec 2009 23:20:59 -0800 

when you run the code below, you'll get a very strange result.
But  if you run the target html that be commented, it works very well , what
happen ??? Help!!!
=====================================================================



<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.js <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>&nbsp</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="up" /> \

   <input id="pl_bt_down" type="button" value="down" />
\
                                   </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>&nbsp</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="up" />
               <input id="pl_bt_down" type="button" value="down" />
           </td>
               </tr>
   </table>
-->
</body>
</html>

Reply via email to