Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

javascript / jquery

Posted on 2011-09-22
4
Medium Priority
?
252 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 36583434
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
ID: 36585162
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
ID: 36586996
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 2000 total points
ID: 36597188
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

Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

715 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