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
Solved

adding tables to page

Posted on 2009-06-29
5
270 Views
Last Modified: 2013-11-19
The solution for my last question is very good.  I now have another one.  It is in the following page:

http://www.pinyinology.com/wheel/display/wheel.html

Thanks a lot for your help.  
0
Comment
Question by:fuli3665
  • 3
  • 2
5 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 125 total points
ID: 24741988
fuli3665,

It's always better to post the code along with a link.  I have included your code below.

There is a gap between the text and the tables because you have some invalid javascript here:

for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td><br />');
}

The addition of the <br /> at the end breaks the table and the browser moves the line break to the outside of the table.  Simply change the above to:

for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td>');
}

to fix it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>letters</title>
 
<style type='text/css'>
body {margin:20px;}
table {border-collapse:collapse;}
 
td {border:3px blue solid; width:30px; height:30px; text-align:center;}
 
#first {margin-bottom:20px;}
</style>
 
<script type='text/javascript'>
 
//var text2beshown='FLORIDA,USA';
 
//var text2beshown='ABCDEFG,XYZ';
 
var text2beshown='u±YNh4Ñ‹';
var tout;
var lno;
var show=0;
 
function showLetter(){
  document.getElementById('td'+lno).innerHTML = show?text2beshown.charAt(lno):' ';
  lno++;
  if( lno<text2beshown.length ) tout=setTimeout("showLetter()",show?300:1);
}
 
function showIt(){
  lno=0;
  show=1;
  showLetter();
}
 
function hideIt(){
  lno=0;
  show=0;
  showLetter();
}
 
</script>
</head>
<body>
 
1. The code is very good. It can display different number of cells and Chinese script. 
 
<p>
 
2. At least 9 more tables need to be placed in the page. I tried to modify the code, but to no avail. Please show me how to add another table.  I may be able to do the rest. 
</p>
 
3. Please teach how to reduce space between this sentence and the following table. Thanks a million.
 
<table id='first'>
<tr>
<script type='text/javascript'>
for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td><br />');
}
</script>
</tr>
 
</table>
 
<form>
 
<input type='button' value='show letters' name='name1' onClick="showIt()"/>
 
<input type='button' value='reset' name='name2' onClick="hideIt()" />
 
 
</form>
 
<br />
 
<p>
 More tables need to be placed in this page.
</p>
 
<table id='second' style='border-collapse:collapse;'>
<tr>
<td>F</td><td>L</td><td>O</td><td>R</td><td>I</td><td>D</td><td>A</td>
 
</tr>
 
</table>
 
<p>
<form>
<input type='button' value='show letters'style='margin-right:15px;'>
 
<input type='button' value='reset'>
</form>
</p>
 
<br /><br />
 
<table id='second' style='border-collapse:collapse;'>
<tr>
<td>F</td><td>L</td><td>O</td><td>R</td><td>I</td><td>D</td><td>A</td>
 
</tr>
 
</table>
 
<p>
<form>
<input type='button' value='show letters'style='margin-right:15px;'>
 
<input type='button' value='reset'>
</form>
</p>
 
. . . More tables . . .
 
 
</body>
</html>

Open in new window

0
 

Author Comment

by:fuli3665
ID: 24758728
Hi, Jason

Thanks for your help. Now the gap problem is solved. I modified the code following your advice.

 I still need to add more interactive tables to the page.  There are three one-row tables in the following page.  Only the first one has  interaction, but not the next two. I code them in html to show my intention.  If you can show me how to add another table, I may be able to add more by myself.

http://www.pinyinology.com/listing/quote/test.html

If possible, please help more.  Thanks..
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24758879
I don't understand the question.  If you need more tables, add them.

Or am I missing something?
0
 

Author Comment

by:fuli3665
ID: 24769045
I don't know how to modify the code to  the second table to be interactive  Please open the following page:

http://www.pinyinology.com/listing/quote/test2.html

Thanks for your help.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24769380
Here's the code for the first table:

<table id='first'>
<tr>
<script type='text/javascript'>
for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td>');
}
</script>
</tr>
</table>
<form>
<input type='button' value='show letters' name='name1' onClick="showIt()"/>
<input type='button' value='reset' name='name2' onClick="hideIt()" />
</form>
 
And here is the code for the second table:
 
<table id='second' style='border-collapse:collapse;'>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>

<form>
<input type='button' value='show letters' style='margin-right:15px;'>
 <input type='button' value='reset'>
</form>

----------

See the difference?
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to dynamically set the form action using jQuery.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

828 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