发表新帖
发表新帖

Hiding table data using

前端 未结
关注
10 1056
轻奢々
轻奢々 2020-12-15 16:22

So, I\'ve hidden whole tables like this, which works fine:




        
                      

              相关标签:
       

      
      
      

        

          10条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  挽巷        
                
              
    
                            
    
                2020-12-15 16:36
              
    
            
    
            
    
                                                                       

        
    

    

        /* add javascript*/
    {
    document.getElementById('abc 1').style.display='none';
    }
   /* after that add html*/
   
    

        <html>
    <head>
    <title>...</title>
    </head>
    <body>
    <table border = 2>
    <tr id = "abc 1">
    <td>abcd</td>
    </tr>
    <tr id ="abc 2">
    <td>efgh</td>
    </tr>
    </table>
    </body>
    </html>

    
    
                                                                    
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  野性不改        
                
              
    
                            
    
                2020-12-15 16:39
              
    
            
    
            
    
                                                                       

    You are not allowed to have div tags between tr tags. You have to look for some other strategies like creating a CSS class with display: none and adding it to concerning rows or adding inline style display: none to concerning rows.
    


    .hidden
{
  display:none;
}

<table>
  <tr><td>I am visible</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
</table>

    


    or
    


    <table>
  <tr><td>I am visible</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
</table>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  慢半拍i        
                
              
    
                            
    
                2020-12-15 16:39
              
    
            
    
            
    
                                                                       

    Yes, you can hide only the rows that you want to hide. This can be helpful if you want to show rows only when some condition is satisfied in the rows that are currently being shown. The following worked for me.  
    


    <table>
  <tr><th>Sample Table</th></tr>  
  <tr id="row1">
    <td><input id="data1" type="text" name="data1" /></td>
  </tr>
 <tr id="row2" style="display: none;">
    <td><input id="data2" type="text" name="data2" /></td>
 </tr>
 <tr id="row3" style="display: none;">
    <td><input id="data3" type="text" name="data3" /></td>
 </tr>
</table>

    


    In CSS, do the following:  
    


    #row2{
    display: none;
}

#row3{
    display: none;
}

    


    In JQuery, you might have something like the following to show the desired rows.  
    


    $(document).ready(function(){
    if($("#row1").val() === "sometext"){  //your desired condition
        $("#row2").show();
    }

    if($("#row2").val() !== ""){   //your desired condition
        $("#row3").show();
    }
});

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  不知归路        
                
              
    
                            
    
                2020-12-15 16:41
              
    
            
    
            
    
                                                                       

    Just set the display:none on the  elements that you want to hide:
    


    <table>
<tr><th>Test Table</th><tr>
<tr style="display:none"><td>1. 123456789</td><tr>
<tr><td>2. 123456789</td><tr>
<tr><td>3. 123456789</td><tr>
</table>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  春和景丽        
                
              
    
                            
    
                2020-12-15 16:44
              
    
            
    
            
    
                                                                       

    <style type="text/css">
.hidden { display:none; }
</style>

<table>
<tr><th>Test Table</th><tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
</table>

    


    And instead of:
    


    <div style="display:none;">
<table>...</table>
</div>

    


    you had better use:
    ...
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  Happy的楠姐        
                
              
    
                            
    
                2020-12-15 16:48
              
    
            
    
            
    
                                                                       

    Just apply the style attribute to the tr tag. In the case of multiple tr tags, you will have to apply the style to each element, or wrap them in a tbody tag:
    


    <table>
  <tr><th>Test Table</th><tr>
  <tbody style="display:none">
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
  </tbody>
</table>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

       
      
    
    

          
 
     
 

        
热议问题

            
                 


Test Table