Solved

javascript / jquery

Posted on 2011-09-22
4
224 Views
Last Modified: 2012-05-12
I have a data return from database like
<html>
<div>
aa
ab
ac
ad
ae
af
ag
</div>
and I want to use either javascipt or jquery to make it automatically separate by 4 columns.

I don't know much a javascript/jquery...something easier will be great

Thanks
0
Comment
Question by:Webboy2008
  • 2
4 Comments
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
you're better off doing the formatting server side, whether you're rendering it on the fly or via an AJAX call, formatting the HTML on the server side will make this much easier to do.
0
 
LVL 17

Expert Comment

by:sonawanekiran
Comment Utility
Look at below code
Demo : http://jsfiddle.net/uW3QC/3/





<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
    var content = $.trim($("div").html());
    var lines = content.split(/\n/);
    var j = 0;
    
    var data_incol = lines.length%4 == 0 ? lines.length/4 : parseInt((lines.length/4) + 1);
    
    var rows = lines.length%data_incol == 0 ? lines.length/data_incol : parseInt((lines.length/data_incol) + 1);
    
    for(var i = 1 ; i<= data_incol; i++)
    {
      $("#output table").append("<tr id='col" + i + "'></tr>");
    }
    var j = 0;
    $.each(lines,function(i,line){
      
      if (i % rows == 0) {
        j = j +1;
        $("#output table tr#col" + j).append("<td>" + line + "</td>");
      } 
      else
       $("#output table tr#col" + j).append("<td>" + line + "</td>");
    });
    
  });


  </script>
  <title>Kiran Test</title>
  </head>
  <body>
   <b>Your Data</b>
    <div id="input">
      aa
      ab
      ac  
      ad
      ae
      af
      ag
    </div>
    
    <br />
    <b>Final Data</b>
    <div id="output">
      <table></table>
    </div>         

  </body>
  </html>

Open in new window

0
 

Author Comment

by:Webboy2008
Comment Utility
Thank, it works However, now the letter is arranged by horizonal.
I prefer like

Agoura Hills          Alta Loma                                  
Alhambra              Letter start b...                          
Aliso Viejo             Letter start c.                          
Alta Loma                                                            


So the alp order will be vertically instead of horizonal. Is that possible?


<%@LANGUAGE="Vbscript" CODEPAGE="65001"%>
<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script>
      $(document).ready(function () {
          var content = $.trim($("div").html());
          var lines = content.split(/\n/);
          var j = 0;

          var data_incol = lines.length % 4 == 0 ? lines.length / 4 : parseInt((lines.length / 4) + 1);

          var rows = lines.length % data_incol == 0 ? lines.length / data_incol : parseInt((lines.length / data_incol) + 1);

          for (var i = 1; i <= data_incol; i++) {
              $("#output table").append("<tr id='col" + i + "'></tr>");
          }
          var j = 0;
          $.each(lines, function (i, line) {

              if (i % rows == 0) {
                  j = j + 1;
                  $("#output table tr#col" + j).append("<td>" + line + "</td>");
              }
              else
                  $("#output table tr#col" + j).append("<td>" + line + "</td>");
          });

      });


  </script>
  <title>City Test</title>
  </head>
  <body>
   <b>Your City</b>
    <div id="input">
Agoura Hills                                      
Alhambra                                          
Aliso Viejo                                      
Alta Loma                                        
Altadena                                          
Anaheim                                          
Anaheim Hills                                    
Anyplace City                                    
Anza                                              
Apple Valley                                      
Arcadia                                          
Azusa                                            
Baldwin Park                                      
Banning                                          
Bell Gardens                                      
Bellflower                                        
Bloomington                                      
Brea                                              
Buena Park                                        
Capistrano Beach                                  
Carson                                            
Cerritos                                          
Chino                                            
Chino Hills                                      
City Of Industry                                  
Claremont                                        
cm                                                
Colton                                            
Compton                                          
Corona                                            
Costa Mesa                                        
Covina                                            
Crestline                                        
Culver City                                      
Cypress                                          
Devore Heights                                    
Diamond Bar                                      
Downey                                            
Duarte                                            
El Monte                                          
Encino                                            
Escondido                                        
Etiwanda                                          
Fontana                                          
Foothill Ranch                                    
Fountain Valley                                  
Fountian Valley                                  
Fullerton                                        
                     
    </div>
   
    <br />
    <b>Final Data</b>
    <div id="output">
      <table></table>
    </div>        

  </body>
  </html>
0
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 500 total points
Comment Utility
Ok. Look at below code

Demo: http://jsfiddle.net/uW3QC/4/




<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
    var content = $.trim($("div").html());
    var lines = content.split(/\n/);
    
    
    var data_incol = lines.length%4 == 0 ? lines.length/4 : parseInt((lines.length/4) + 1);
    
    var rows = lines.length%data_incol == 0 ? lines.length/data_incol : parseInt((lines.length/data_incol) + 1);
    
    for(var i = 1 ; i<= data_incol; i++)
    {
      $("#output table").append("<tr id='col" + i + "'></tr>");
    }
    
    var j =0;
    var k = 0;
    $.each(lines,function(i,line){
      j = j+1;
      k = k+1;
      if (j % data_incol == 0) {
       k = 1;
      }
     
      $("#output table tr#col" + k).append("<td>" + line + "</td>");
    });
    
  });


  </script>
  <title>Kiran Test</title>
  </head>
  <body>
   <b>Your Data</b>
    <div id="input">
      Agoura Hills                                      
Alhambra                                          
Aliso Viejo                                       
Alta Loma                                         
Altadena                                          
Anaheim                                           
Anaheim Hills                                     
Anyplace City                                     
Anza                                              
Apple Valley                                      
Arcadia                                           
Azusa                                             
Baldwin Park                                      
Banning                                           
Bell Gardens                                      
Bellflower                                        
Bloomington                                       
Brea                                              
Buena Park                                        
Capistrano Beach                                  
Carson                                            
Cerritos                                          
Chino                                             
Chino Hills                                       
City Of Industry                                  
Claremont                                         
cm                                                
Colton                                            
Compton                                           
Corona                                            
Costa Mesa                                        
Covina                                            
Crestline                                         
Culver City                                       
Cypress                                           
Devore Heights                                    
Diamond Bar                                       
Downey                                            
Duarte                                            
El Monte                                          
Encino                                            
Escondido                                         
Etiwanda                                          
Fontana                                           
Foothill Ranch                                    
Fountain Valley                                   
Fountian Valley                                   
Fullerton
    </div>
    
    <br />
    <b>Final Data</b>
    <div id="output">
      <table></table>
    </div>         

  </body>
  </html>

Open in new window

0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now