Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

adding tables to page

Posted on 2009-06-29
5
Medium Priority
?
298 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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 …

604 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