Solved

adding tables to page

Posted on 2009-06-29
5
246 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
Comment Utility
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
Comment Utility
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
Comment Utility
I don't understand the question.  If you need more tables, add them.

Or am I missing something?
0
 

Author Comment

by:fuli3665
Comment Utility
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
Comment Utility
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Hovering effect 9 28
responsive divs setup - what am I doing wrong 2 29
User profile Size Report 3 34
Problem to page 4 11
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
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 …

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now