`

jquery 删除,插入行,默认值为空

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-5-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
        var $bb=$("#bb");//=$("#bb").remove();
        var $cc=$("#cc").remove();
        var $dd=$("#dd").remove();
        var va;

         $("#yy").change(function(){
            
             if(this.value=="bb"){               
                $bb.appendTo("#aa"); //$bb.appendTo("#aa");  即使是多次重复的插入,结果还是不变的。什么??
  
                if(va=="cc"){
                    $cc=$("#cc").remove();
                }else if(va=="dd"){
                    $dd=$("#dd").remove();
                }
             }else if(this.value=="cc"){              
               $cc.appendTo("#aa");
               if(va=="bb"||va==""){
                    $bb=$("#bb").remove();
                }else if(va=="dd"){
                    $dd=$("#dd").remove();
                }              
             }else if(this.value=="dd"){
                if(va=="bb"||va==""){
                    $bb=$("#bb").remove();
                }else if(va=="cc"){
                    $cc=$("#cc").remove();
                }
               $dd.appendTo("#aa");
             }else if(this.value==""){
                if(va=="bb"){
                   
                }else {  
                 $bb.appendTo("#aa"); 
                    if(va=="cc") {
                        $cc=$("#cc").remove();
                    }else if(va=="dd"){
                        $dd=$("#dd").remove();
                    }
                }
             }
         })   


          $("#yy").click(function(){
             va=this.value;   
         })   


  });
  </script>
</head>
<body>
	<select id="yy">        
        <option value="" selected >-----</option>
        <option value="bb"  >bb</option>
        <option value="cc"  >cc</option>
        <option value="dd">dd</option>
    </select>


    <table>
        <tr id="aa">
            <td>AA</td>
            <td>AA</td>
            <td>AA</td>
        </tr>
        <tr id="bb">
            <td>bb</td>
            <td>bb</td>
            <td>bb</td>
        </tr>
        <tr id="cc">
            <td>cc</td>
            <td>cc</td>
            <td>cc</td>
        </tr>

        <tr id="dd">
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
        </tr>
        <tr id="ee">
            <td>EE</td>
            <td>EE</td>
            <td>EE</td>
        </tr>
    </table>
</body>
</html>

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics