这个怎么改成jquery？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
             
                 
        function f1(){                                            //新增行   
            var i=0
            var Mytable=document.getElementById('Mytable');
            var objrow = Mytable.insertRow(1);       
             
            for(i=0;i<4;i++){
                var objcell = objrow.insertCell(i);
                objcell.innerHTML = document.getElementById("td"+i).innerHTML;
                 
            }                        
        }
         
        function f2(){                    
var inputs=document.getElementsByTagName('input');
var Mytable=document.getElementById('Mytable');
var a=[];
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=='checkbox'){
a.push(inputs[i]);
}
} 

         for(var i=a.length-1;i>=0;i--){
  if(a[i].checked){
Mytable.deleteRow(i+1);
}
 }
        
         
        }
    </script>
</head>
 
 
<body>
    <table id="addButton1" name="x-btn">
        <tr>
                    <td class="x-btn-center">
     
                        <button type="button" hidefocus="true" class="x-btn-text add" onclick="f1()">新增行</button>
                                         
                    </td>
        </tr>
                 
        <tr>
             
            <td class="x-btn-center">   
                <button type="button" hidefocus="true" class="x-btn-text delete" onclick="f2()" >删除行</button>       
            </td>
             
        </tr>
    </table>
  
                     
 
 
 
     
     
<table  id="Mytable" >
        <thead>
                    <tr>
                    <th width="30px" align="center">
                    <div>选择</div></th>
                    <th align="center">
                    <div>行号</div></th>
                     
                    <th align="center">
                    <div>本次退货数量</div></th>
                     
                    <th align="center">
                    <div>本次退货数量</div></th>
                     
                    </tr>
        </thead>
     
<tbody id="tab1" style="display:">
     
        <tr class="odd">
                    <td  id="td0">
                                        <input type="checkbox" name="checkbox1" value="1" id="checkid"> 
                                    </td>
                    <td  id="td1">
                                        <input  type="TEXT" />
                                    </td>
                    <td  id="td2">
                                        <input  type="TEXT" />
                                    </td>
                    <td  id="td3">
                                        <input  type="TEXT" />
                                    </td>           
        </tr>
              <tr class="odd" style="display:none">
                    <td  id="td0">
                                        <input type="checkbox" name="checkbox1" value="1" id="checkid"> 
                                    </td>
                    <td  id="td1">
                                        <input  type="TEXT" />
                                    </td>
                    <td  id="td2">
                                        <input  type="TEXT" />
                                    </td>
                    <td  id="td3">
                                        <input  type="TEXT" />
                                    </td>           
        </tr>
        
    </tbody>
     
</table>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>  
     
        <script type="text/javascript">
                 
                     
            function f1(){                                            //新增行   
     
                var Mytable=$('#Mytable'),last=Mytable.find('tr:last') ;
                Mytable.find('tr:eq(1)').before( last.clone().show() );                    
            }
             
            function f2(){                    
     
      $('#Mytable :checkbox:checked').parents('tr').remove()
            
             
            }
        </script>
    </head>
     
     
    <body>
        <table id="addButton1" name="x-btn">
            <tr>
                        <td class="x-btn-center">
         
                            <button type="button" hidefocus="true" class="x-btn-text add" onclick="f1()">新增行</button>
                                             
                        </td>
            </tr>
                     
            <tr>
                 
                <td class="x-btn-center">   
                    <button type="button" hidefocus="true" class="x-btn-text delete" onclick="f2()" >删除行</button>       
                </td>
                 
            </tr>
        </table>
      
                         
     
     
     
         
         
    <table  id="Mytable" >
            <thead>
                        <tr>
                        <th width="30px" align="center">
                        <div>选择</div></th>
                        <th align="center">
                        <div>行号</div></th>
                         
                        <th align="center">
                        <div>本次退货数量</div></th>
                         
                        <th align="center">
                        <div>本次退货数量</div></th>
                         
                        </tr>
            </thead>
         
    <tbody id="tab1" style="display:">
         
            <tr class="odd">
                        <td  id="td0">
                                            <input type="checkbox" name="checkbox1" value="1" id="checkid"> 
                                        </td>
                        <td  id="td1">
                                            <input  type="TEXT" />
                                        </td>
                        <td  id="td2">
                                            <input  type="TEXT" />
                                        </td>
                        <td  id="td3">
                                            <input  type="TEXT" />
                                        </td>           
            </tr>
                  <tr class="odd" style="display:none">
                        <td  id="td0">
                                            <input type="checkbox" name="checkbox1" value="1" id="checkid"> 
                                        </td>
                        <td  id="td1">
                                            <input  type="TEXT" />
                                        </td>
                        <td  id="td2">
                                            <input  type="TEXT" />
                                        </td>
                        <td  id="td3">
                                            <input  type="TEXT" />
                                        </td>           
            </tr>
            
        </tbody>
         
    </table>
    </body>
    </html>
      

  2.   

    （1）html中去掉两个按钮的onclick="..."
    （2）引入jquery，然后：$(function(){    $('#addButton1 .add').click(function(){
          var copy=$('#tab1 tr:hidden').eq(0).clone().show();
          copy.insertBefore($('#tab1 tr:hidden'))
        })    $('#addButton1 .delete').click(function(){
          $('#tab1 :checkbox:checked').parents('tr').remove()
        })
    });