Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 853
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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