发表新帖
发表新帖

How to transform HTML table to list with JQuery?

后端 未结
关注
4 1746
暖寄归人
暖寄归人 2020-12-20 00:38

How would I transform a table



        
                      

              相关标签:
       

      
      
      

        

          4条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  暖寄归人        
                
              
    
                            
    
                2020-12-20 00:48
              
    
            
    
            
    
                                                                       

    You could try:
    


    function convertToList() {
  var list = $("<ul></ul>");
  $("table tr").each(function() {
    var children = $(this).children();
    list.append("<li><p>" + children[0].text() + "</p><p>" + children[1] + "</p></li>");
  }
  $("table").replaceWith(list);
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  滥情空心        
                
              
    
                            
    
                2020-12-20 00:52
              
    
            
    
            
    
                                                                       

    I can see this being useful in SharePoint which likes to use a bunch of nested tables to render a simple list which is more efficient using , 
  • ...
    
                                                                        
    
                                                        
    
            

            

              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              

                                                            

            

                      
          
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  情书的邮戳        
                
              
    
                            
    
                2020-12-20 00:57
              
    
            
    
            
    
                                                                       

    This still has some work left, but this is what I got to work so far:
    


    <script>
$(function(){
 t2l("uglytable");
});

function t2l(divname)
{ 
 var ulist  = $("<ul></ul>");
 var table  = "div." + divname + " table";
 var tr   = "div." + divname + " table tr";

 $(tr).each(function(){
  var child = $(this).children();
  ulist.append("<li>" + child.text() + "</li>");
 });
 $(table).replaceWith(ulist);
}

</script>

<div class="uglytable">
  <table border="1">
   <tr>
    <td>lakers</td>
   </tr>
   <tr>
    <td>dodgers</td>
   </tr>
   <tr>
    <td>angels</td>
   </tr>
   <tr>
    <td>chargers</td>
   </tr>
  </table>
 </div>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  小鲜肉        
                
              
    
                            
    
                2020-12-20 01:13
              
    
            
    
            
    
                                                                       

    function convertToList(element) {
    var list = $("<ul/>");

    $(element).find("tr").each(function() {
        var p = $(this).children().map(function() {
            return "<p>" + $(this).html() + "</p>";
        });

        list.append("<li>" + $.makeArray(p).join("") + "</li>");
    });

    $(element).replaceWith(list);
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             
        
        
    
          
    
            
            
    
              
              
    
            
    


                                 
              
    
            
    
                          
    

        
         
    
                
                
    
                  
                
    
                
    
                   看不清?
                
    
              
    
                                  
    
                    
   
                 
             
              
    提交回复
    
            
    
          
        
    
      
       
      
    
    
    
          
 
     
 
    
        
    热议问题
    
            
                 
    
    
    
        Name
        Price