Need script to create multicolumn table from list

@juanwei26Oct 16.2006

Would some kind person know of a script that, imbedded in a web page, will take a <ul> list of items and display them in a 2 or three-column <table>?

Thanks.

to post a comment

JavaScript

15 Comments(s) _↴

@JMRKEROct 16.2006 — #Why not this?

[code=php]
 <table border=1>
 <tr><td>
 <ul>
 <li>List 1 item 1</li>
 <li>List 1 item 2</li>
 <li>List 1 item 3</li>
 <ul>
 </td><td>
 <ul>
 <li>List 2 item 1</li>
 <li>List 2 item 2</li>
 <li>List 2 item 3</li>
 <ul>
 </td><td>
 <ul>
 <li>List 3 item 1</li>
 <li>List 3 item 2</li>
 <li>List 3 item 3</li>
 <ul>
 </td><tr>
 </table>
 [/code]

Unless you want to use <DIV> and CSS coding.

@juanwei26authorOct 16.2006 — #Why not this?

<static table snipped>[/quote]
Thanks. My list changes from time to time and it's a pain to have to add cells to a static table and alphabetize them by hand.

I can easily add a new item to the list in the correct sorted order and I would like a script that would create a 2- or 3-column table from that list when the page is viewed.

@JMRKEROct 16.2006 — #You could create one javascript array like

[code=php]
 Col1List = new Array(
 'List 1 - Item 1',
 'List 1 - Item 2',
 'List 1 - Item 3');
 [/code]

Repeat for multiple columns as Col2List etc.

Then, where the table belongs:

[code=php]
 <table border=1><tr>
 <script type="text/javascript">
 var str = '<td><ul>';
 for (items=0; items<Col1List.length; items++) {
 str += '<li>'+Col1List[items]+'</li>';
 }
 document.write(str);
 // repeat as needed for other columns
 </script>
 </tr></table>
 [/code]

Adding a sort function to the Col#List arrays should be fairly easy.

Note: I just did this on the fly, so there may be some typing errors.

@jalarieOct 16.2006 — #Perhaps this will provide a usefull starting point:

<i>
 </i>      &lt;script type="text/javascript"&gt;
 &lt;!-- Hide this code from non-JavaScript browsers
 MC_ncol=5;                                // number of columns
 MC_list=new Array(                        // items in the list
 'item 1',
 'item 2',
 'item 3',
 'item 4',
 'item 5',
 'item 6',
 'item 7',
 'item 8',
 'item 9',
 'item 10',
 'item 11',
 'item 12',
 'item 13',
 'item 14',
 ''                                      // leave this alone
 );
 MC_nrow=Math.ceil((MC_list.length-1)/MC_ncol);
 document.write('&lt;table border="1" cellspacing="2" cellpadding="2"&gt;n&lt;tbody&gt;n');
 document.write('&lt;tr&gt;n&lt;td valign="top"&gt;n');
 for (MC_ix1=0; MC_ix1&lt;MC_list.length-1; MC_ix1++) {
 MC_item=MC_list[MC_ix1];
 if (MC_ix1%MC_nrow == 0) {
 if (MC_ix1 &gt; 0) {
 document.write('&lt;/td&gt;n&lt;td valign="top"&gt;n');
 }
 } else {
 document.write('&lt;br&gt;n');
 }
 document.write(MC_ix1+': '+MC_item);
 }
 document.write('&lt;/td&gt;n&lt;/tr&gt;n&lt;/tbody&gt;n&lt;/table&gt;n');
 // End hiding --&gt;
 &lt;/script&gt;

@JMRKEROct 16.2006 — #Neat example 'jalarie'. Nice touch with the 'MC_ncol' variable.

'juanwei26' should find it easy to modify.

@juanwei26authorOct 16.2006 — #Neat example 'jalarie'. Nice touch with the 'MC_ncol' variable.

'juanwei26' should find it easy to modify.[/QUOTE]
If he had a clue!! ? I'll give it a try and let you know what happens. Many thanks.

@juanwei26authorOct 16.2006 — #If he had a clue!! ? I'll give it a try and let you know what happens. Many thanks.[/QUOTE]That worked out pretty well.

Minor quibble...my list items are things such as

'<a href="#ac">Air Conditioning/Heating</a>',

'<a href="#limo">Airport Transportation</a>',

'<a href="#sneeze">Allergist</a>',

'<a href="#appliance">Appliance Repair</a>',

'<a href="#bodyshop">Auto Body Shop</a>',

and so on and they were easier to edit in Dreamweaver's design view. I'm definitely getting lazier in my old age (72) so please bear with me. ?

Thanks for the help.

@JMRKEROct 17.2006 — #Try this modification as see if it works for you.

[code=php]
 <html>
 <head>
 <title>Multi-Column List</title>
 </head>
 <body>
 <script type="text/javascript">
 <!-- Hide this code from non-JavaScript browsers
 MC_ncol=3;                                // number of columns
 MC_list=new Array(                        // items in the list
 '<a href="#ac">Air Conditioning/Heating</a>',
 '<a href="#limo">Airport Transportation</a>',
 '<a href="#sneeze">Allergist</a>',
 '<a href="#appliance">Appliance Repair</a>',
 '<a href="#bodyshop">Auto Body Shop</a>',
 ''                                      // leave this alone
 );
 MC_nrow=Math.ceil((MC_list.length-1)/MC_ncol);
 document.write('<table border="1" cellspacing="2" cellpadding="2">n<tbody>n');
 document.write('<tr>n<td valign="top">n');
 for (MC_ix1=0; MC_ix1<MC_list.length-1; MC_ix1++) {
 MC_item=MC_list[MC_ix1];
 if (MC_ix1%MC_nrow == 0) {
 if (MC_ix1 > 0) {
 document.write('</td>n<td valign="top">n');
 }
 } else {
 document.write('<br>n');
 }
 //            document.write(MC_ix1+': '+MC_item);
 document.write(MC_item);
 }
 document.write('</td>n</tr>n</tbody>n</table>n');
 // End hiding -->
 </script>
 </body>
 </html>
 [/code]

BTW, you call 72 old?

@juanwei26authorOct 17.2006 — #Thanks.

Other than eliminating the line numbers, what is the improvement here?

Well 72 ain't exactly young!! :-)

@JMRKEROct 17.2006 — #Modifications:

1. Used your sample list instead of 'Item 1', etc.

If you have local references, then clicking on link will go directly to site location.

2. Changed number of columns to display

I thought that is what you wanted to do. If not, specify further.

Note: Age is just "mind over matter". If you don't 'mind', then it don't 'matter'! ?

@juanwei26authorOct 17.2006 — #Originally I had a list like this:

<ul id="list">

<li><a href="#ac">Air Conditioning/Heating</a> </li>

<li><a href="#limo">Airport Transportation</a></li>

<li><a href="#sneeze">Allergist</a></li>

<li><a href="#appliance">Appliance Repair</a> </li>

<li><a href="#bodyshop">Auto Body Shop</a></li>

<li><a href="#goodwrench">Auto Service</a></li>

<li><a href="#awnings">Awnings</a></li>

<li><a href="#heart">Cardiologist</a></li>

<li><a href="#rug">Carpet Cleaning</a></li>

<li><a href="#tile">Ceramic Tile</a> </li>

<li><a href="#sweep">Chimney Sweep </a></li>

<li><a href="#cracker">Chiropractor</a></li>

<li><a href="#compudoc">Computer Service</a></li>

<li><a href="#copy">Copies, Printing, Graphic Design</a> </li>

<li><a href="#cpa">CPA</a></li>

<li><a href="#dentist">Dentist</a></li>

<li><a href="#skin">Dermatologist</a></li>

<li><a href="#tar">Driveway Sealer</a></li>

<li><a href="#duct">Duct Cleaning </a></li>

</ul>

I had hoped there was a way to read that list rather than creating a static array.

Thanks.

As for age being mind over matter, I agree until your body begins to break down. (I'm sure you don't want my brakdown list!)

@JMRKEROct 18.2006 — #You can put your original list into a javascript file (slight modifications)

MC_list.js

[code=php]
 // MC_list stored in 'MC_list.js' file
 var MC_list = new Array (
 '<li><a href="#ac">Air Conditioning/Heating</a> </li>',
 '<li><a href="#limo">Airport Transportation</a></li>',
 '<li><a href="#sneeze">Allergist</a></li>',
 '<li><a href="#appliance">Appliance Repair</a></li>',
 '<li><a href="#bodyshop">Auto Body Shop</a></li>',
 '<li><a href="#goodwrench">Auto Service</a></li>',
 '<li><a href="#awnings">Awnings</a></li>',
 '<li><a href="#heart">Cardiologist</a></li>',
 '<li><a href="#rug">Carpet Cleaning</a></li>',
 '<li><a href="#tile">Ceramic Tile</a> </li>',
 '<li><a href="#sweep">Chimney Sweep </a></li>',
 '<li><a href="#cracker">Chiropractor</a></li>',
 '<li><a href="#compudoc">Computer Service</a></li>',
 '<li><a href="#copy">Copies, Printing, Graphic Design</a></li>',
 '<li><a href="#cpa">CPA</a></li>',
 '<li><a href="#dentist">Dentist</a></li>',
 '<li><a href="#skin">Dermatologist</a></li>',
 '<li><a href="#tar">Driveway Sealer</a></li>',
 '<li><a href="#duct">Duct Cleaning</a></li>',
 '');   // leave blank
 // enter where ever you want or alphabetical order
 [/code]

Then use this modified script:

[code=php]
 <html>
 <head>
 <title>Multi-Column List</title>
 <script type="text/javascript" src="MC_list.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 <!-- Hide this code from non-JavaScript browsers
 MC_ncol=5;                                // number of columns
 MC_nrow=Math.ceil((MC_list.length-1)/MC_ncol);
 document.write('<table border="1" cellspacing="2" cellpadding="2">n<tbody>n');
 document.write('<tr>n<td valign="top"><ul>n');
 for (MC_ix1=0; MC_ix1<MC_list.length-1; MC_ix1++) {
 MC_item = MC_list[MC_ix1];
 if (MC_ix1%MC_nrow == 0) {
 if (MC_ix1 > 0) { document.write('</td>n<td valign="top">n'); }
 } else { document.write('n'); }
 document.write(MC_item);
 }
 document.write('</ul></td>n</tr>n</tbody>n</table>n');
 // End hiding -->
 </script>
 </body>
 </html>
 [/code]

Then you only need to change the contents of the MC_list.js file

for the display to change.

Age comment: Your brain doesn't seem to be effected by any breakdown. ?

@juanwei26authorOct 18.2006 — #I didn't explain that very well. Even though my brain seems to you not be affected by any breakdown (thanks -- can I tell that to my bridge partner?? :-)), I have been using Dreamweaver WYSIWYG web editor rather than UltraEdit for web pages.

If I have a <ul>...</ul> list, it shows up in "design" view of DW where I can add a new entry and also add tags in a relatively painless manner. Your suggestion has me back with a text editor to enter new entries and to add the tags.

Just being lazy. :-) Thanks.

@JMRKEROct 18.2006 — #You program so its your choice.

I don't have either program, so I just do it the 'hard' way as 'easy' as I can.

Good luck with your endeavors.

@juanwei26authorOct 18.2006 — #You program so its your choice.

I don't have either program, so I just do it the 'hard' way as 'easy' as I can.

Good luck with your endeavors.[/QUOTE]
Thanks for your help. Much appreciated.

Also in #JavaScript _↴

slideshow problems close current window Refreshing childs parent of parent window

Success!

Help @juanwei26 spread the word by sharing this article on Twitter...

Tweet This

Need script to create multicolumn table from list

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need script to create multicolumn table from list

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴