Solved

adding tables to page

Posted on 2009-06-29
5
277 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 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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

733 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