Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 860
  • Last Modified:

How to display data in two columns using <div> using javascript, html?

Hi all,

I am getting the data dynamically. I want to display data in <div> tags in two columns equally. suppose i have 30 links.
I will display first 15 links in first column and last 15 in second column.
Below code is working fine if I use <table> tag.

CHANGE: Problem is that I dont want to use table tag. Would you please convert the below code using <div> tags so that it will display the data in two columns.

Its really urgent. Please convert the below code so that it will just use <div> tags , NO <table>.
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
</head>
 
<body>
 
      
 
 
                <div id="someId">
                  
                     <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                 
                 <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test2 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test3 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test4 (Supervisor)</u></a>
                   <a href="" style="color:blue; font-size:11pt;"><u>test5 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test6 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test7 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test8 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test9 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test10 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test11 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test12 (Supervisor)</u></a>
                </div>    
 
<script type="text/javascript">
var element=document.getElementById('someId');
var a=element.getElementsByTagName('a');
var table=element.appendChild(document.createElement('table')).insertRow(-1);
var column=[table.insertCell(-1),table.insertCell(-1)];
		
var styleData = 'border:1px solid #000000;font-weight:bold;width:400px;height:300px;';
column[0].style.setAttribute('cssText', styleData);
column[1].style.setAttribute('cssText', styleData);
column[0].style.verticalAlign="top";
column[1].style.verticalAlign="top";
for (var i=0;i<a.length;i++) 
{
column[(i<15)?0:1].appendChild(document.createElement('li')).appendChild(a[0]).appendChild(document.createElement('br'))
}
</script>
 
</body>
 
 
</html>

Open in new window

0
Saroj13
Asked:
Saroj13
  • 8
  • 5
  • 2
1 Solution
 
ChristoferDutzCommented:
Hi,

have a look at this link. I think it should provide all information needed.

http://www.bombaycrow.com/blog/index.php/2008/02/using-the-tag-to-display-columns-rather-than-tables/
0
 
Saroj13Author Commented:
I dont know how to create <div> tags in javscript. Above code is using <tables>.

Above code is working fine, but i need all <div> tags. Would you please convert the above javacript code using <div> tags.
I need  to display data in two columns equally in tabular format.

Thanks
0
 
HonorGodCommented:
Well, I would consider having:

A 1 row, 2 cell table, with each cell possibly containing a div.
then, your "cells" (divs) would be side by side...
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Saroj13Author Commented:
Hi Honor,

Would you please make the changes in the belwo code.  Its working fine with < table>. I dont want to use table tag. I would like that to replace with <div> tags. each column contains 15 items. First 15 items are filled in column and next 15 items in second column, columns should fill from top to bottom.

Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
</head>
 
<body>
 
      
 
 
                <div id="someId">
                  
                     <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                 
                 <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test2 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test3 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test4 (Supervisor)</u></a>
                   <a href="" style="color:blue; font-size:11pt;"><u>test5 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test6 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test7 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test8 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test9 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test10 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test11 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test12 (Supervisor)</u></a>
                </div>    
 
<script type="text/javascript">
var element=document.getElementById('someId');
var a=element.getElementsByTagName('a');
var table=element.appendChild(document.createElement('table')).insertRow(-1);
var column=[table.insertCell(-1),table.insertCell(-1)];
		
var styleData = 'border:1px solid #000000;font-weight:bold;width:400px;height:300px;';
column[0].style.setAttribute('cssText', styleData);
column[1].style.setAttribute('cssText', styleData);
column[0].style.verticalAlign="top";
column[1].style.verticalAlign="top";
for (var i=0;i<a.length;i++) 
{
column[(i<15)?0:1].appendChild(document.createElement('li')).appendChild(a[0]).appendChild(document.createElement('br'))
}
</script>
 
</body>
 
 
</html>

Open in new window

0
 
ChristoferDutzCommented:
Well it seems to me that you don't have any problems creating the content, but you want someone to do it for you.
Please excuse me for not doint it for you.

If you can create a table element with: "document.createElement('table')"
Then you can imagine, that you can create a div with: "document.createElement('div')"

If you can add a new element to a parent one using: element.appendChild(newElement)"
Then you can do this with your div too.

If you then have a look at the link I posted ... youre ready to go.

But if you're lucky you're going to finde someone who does it for you.
0
 
HonorGodCommented:
Something like this perhaps
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> columns </title>
<script type='text/javascript'>
  function doit() {
    var element = document.getElementById( 'someId' )   // Source div element
    var a       = element.getElementsByTagName( 'a' )   // All anchors within div
    var div     = [ document.createElement( 'div' ), document.createElement( 'div' ) ]
 
    var styleData = 'border:1px solid #000000;font-weight:bold;width:400px;height:300px;'
//  div[ 0 ].style.setAttribute( 'cssText', styleData )
//  div[ 1 ].style.setAttribute( 'cssText', styleData )
 
    var i = 0;
    while ( a.length ) {
      div[ ( i++ < 15 ) ? 0 : 1 ].appendChild( a[ 0 ] ).appendChild( document.createElement( 'br' ) )
    }
    var body = document.getElementsByTagName( 'BODY' )[ 0 ]
    for ( i = 0; i < div.length; i++ ) {
      body.appendChild( document.createElement( 'hr' ) )
      body.appendChild( div[ i ] )
    }
  }
</script>
 
</head>
<body>
<div id='someId'>
  <a href='' style='color:blue; font-size:11pt;'><u>test1 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test2 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test3 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test4 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test5 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test6 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test7 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test8 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test9 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test10 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test11 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test12 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test13 (Supervisor)</u></a>
</div>
<input type='button' value='Doit' onclick='doit()'>
 
</body>
</html>

Open in new window

0
 
Saroj13Author Commented:
Thanks, it creates two columns horizontally.

I want two equal columns side by side in one row using <div>
0
 
Saroj13Author Commented:
Would you please also put bullet points in front of every link using javscript. also align text on the left.

0
 
HonorGodCommented:
Working on it...  It is more challenging than I thought... :-)
0
 
HonorGodCommented:
For which browser(s) must it work?

Note: IE is evil.  :-)
0
 
Saroj13Author Commented:
only IE.
0
 
HonorGodCommented:
What, exactly, do you mean when you say "align text on the left"?

Is an unordered list acceptable?

i.e.,

<div>
  <ul>
    <li><a href='' style='color:blue; font-size:11pt;'><u>test1 (Supervisor)</u></a></li>
...
  </ul>
</div>
0
 
HonorGodCommented:
Chrome, and Firefox are being cooperative, and IE isn't... that's why I asked. :-(
0
 
HonorGodCommented:
This seems to work.  Check it out.

Note: Since there were only 13 links I had 7 put in the first column, and the rest in the second.

To put 15 in the first, change the 7 in line 16, i.e.,

( i++ < 7 )

To 15...

( i++ < 15 )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> columns </title>
<script type='text/javascript'>
  function doit() {
    var element = document.getElementById( 'someId' )   // Source div element
    var a       = element.getElementsByTagName( 'a' )   // All anchors within div
    var div     = [ document.createElement( 'div' ), document.createElement( 'div' ) ]
 
    div[ 0 ].className = 'half'
    div[ 1 ].className = 'half'
 
    var i = 0;
    while ( a.length ) {
      div[ ( i++ < 7 ) ? 0 : 1 ].appendChild( document.createElement( 'li' ) ).appendChild( a[ 0 ] )
    }
 
    var body = document.getElementsByTagName( 'BODY' )[ 0 ]
    body.appendChild( div[ 0 ] )
    body.appendChild( document.createTextNode( '' ) )
    body.appendChild( div[ 1 ] )
  }
</script>
<style type='text/css'>
  .half {
    border:1px solid black;
    display: block;
    float: left;
    font-weight:bold;
    width:400px;
    height:300px;
  }
  .blue {
    color: blue;
    font-size:11pt;
  }
</style>
</head>
<body>
<div id='someId'>
  <a href='' class='blue'><u>test1 (Supervisor)</u></a>
  <a href='' class='blue'><u>test2 (Supervisor)</u></a>
  <a href='' class='blue'><u>test3 (Supervisor)</u></a>
  <a href='' class='blue'><u>test4 (Supervisor)</u></a>
  <a href='' class='blue'><u>test5 (Supervisor)</u></a>
  <a href='' class='blue'><u>test6 (Supervisor)</u></a>
  <a href='' class='blue'><u>test7 (Supervisor)</u></a>
  <a href='' class='blue'><u>test8 (Supervisor)</u></a>
  <a href='' class='blue'><u>test9 (Supervisor)</u></a>
  <a href='' class='blue'><u>test10 (Supervisor)</u></a>
  <a href='' class='blue'><u>test11 (Supervisor)</u></a>
  <a href='' class='blue'><u>test12 (Supervisor)</u></a>
  <a href='' class='blue'><u>test13 (Supervisor)</u></a>
</div>
<input type='button' value='Doit' onclick='doit()'><br>
</body>
</html>

Open in new window

0
 
HonorGodCommented:
Thanks for the grade & points.

Good luck & Happy Easter
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now