?
Solved

adding tables to page

Posted on 2009-06-29
5
Medium Priority
?
292 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
[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
  • 3
  • 2
5 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 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

Stack Overflow Podcast - Developer Story

Welcome to the Stack Overflow podcast recorded Thursday July 20 at Stack Overflow Headquearters in NYC. Your hosts today are podcast regulars Jay Hanlon, David Fullerton, and Ilana Yitzhaki, plus the quite irregular Matt Sherman (Stack Overflow Engineering Manager extraordinaire)

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 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