title: Javascript for table and lookup table
body: <p>I'm trying to make a website that has a table containing a Chinese character in each cell. The user clicks on individual cells, and the character in each cell is displayed in a text-box next to the table. The sequence of characters is found in a lookup table, and an English translation is provided in a second text box.
  Here's the HTML:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;head&gt;
      &lt;title&gt;
          Practice translation
      &lt;/title&gt;
      &lt;script 
          src=&quot;http://code.jquery.com/jquery-1.9.1.min.js&quot;&gt;
      &lt;/script&gt;
      &lt;script 
          type=&quot;text/javascript&quot; 
          src=&quot;Small1.js&quot;&gt;
      &lt;/script&gt;                                                       
      &lt;meta 
          http-equiv=&quot;Content-Type&quot; 
          content=&quot;text/html; charset=UTF-8&quot;&gt;
      &lt;link 
          rel=&quot;shortcut icon&quot; 
          href=&quot;/favicon.ico&quot; 
          type=&quot;image/x-icon&quot;&gt;    
      &lt;link 
          rel=&quot;stylesheet&quot; 
          type=&quot;text/css&quot; 
          href=&quot;Small1.css&quot;&gt;
      &lt;link 
          rel=&quot;shortcut icon&quot; 
          href=&quot;Pallindrome.ico&quot; 
          type=&quot;image/x-icon&quot;&gt;
      &lt;link 
          rel=&quot;icon&quot; 
          href=&quot;Pallindrome.ico&quot; 
          type=&quot;image/x-icon&quot;&gt;
  &lt;/head&gt;
  &lt;/head&gt;
  &lt;body&gt;  
      &lt;table  style=&quot;text-align:center&quot;&gt;
          &lt;tbody&gt; 
      &lt;tr&gt;                    
          &lt;td id= “M13” style=&quot;text-align:center&quot; title=&quot;“duān“ end, extreme; head; beginning&quot; class=&quot;yellow&quot;&gt;端&lt;/td&gt;
          &lt;td id= “N13” style=&quot;text-align:center&quot; title=&quot;“wú, mó“ negative, no, not; KangXi radical 71&quot; class=&quot;yellow&quot;&gt;无&lt;/td&gt;
          &lt;td id= “O13” style=&quot;text-align:center&quot; title=&quot;“zhōng“ end; finally, in the end&quot; color=&quot;#f1c232&quot; class=&quot;yellow&quot;&gt;终&lt;/td&gt;
          &lt;td id= “P13” style=&quot;text-align:center&quot; title=&quot;“shǐ“ begin, start; then, only then&quot; class=&quot;yellow&quot;&gt;始&lt;/td&gt;
          &lt;td id= “Q13” style=&quot;text-align:center&quot; title=&quot;“shī“ poetry; poem, verse, ode&quot;class=&quot;yellow&quot;&gt;诗&lt;/td&gt;
         
      &lt;/tr&gt;                   
      &lt;tr&gt;                    
          
          &lt;td id= “M14” style=&quot;text-align:center&quot; title=&quot;“bǐ, bì, pí, pǐ“ to compare, liken; comparison; than&quot; class=&quot;yellow&quot;&gt;比&lt;/td&gt;
          &lt;td id= “N14” style=&quot;text-align:center&quot; title=&quot;“píng“ flat, level, even; peaceful&quot; class=&quot;green&quot; &gt;平&lt;/td&gt;
          &lt;td id= “O14” style=&quot;text-align:center&quot; title=&quot;“shǐ“ begin, start; then, only then&quot; class=&quot;green&quot;&gt;始&lt;/td&gt;
          &lt;td id= “P14” style=&quot;text-align:center&quot; title=&quot;“xuán“ beautiful jade; star&quot; class=&quot;green&quot;&gt;璇&lt;/td&gt;
          &lt;td id= “Q14” style=&quot;text-align:center&quot; title=&quot;“qíng“ feeling, sentiment, emotion&quot; class=&quot;yellow&quot;&gt;情&lt;/td&gt;  
          
      &lt;/tr&gt;                   
      &lt;tr&gt;
                          
          &lt;td id= “M15” style=&quot;text-align:center&quot; title=&quot;“zuò, zuō, zuó“ make; work; compose, write; act, perform&quot; class=&quot;yellow&quot;&gt;作&lt;/td&gt;
          &lt;td id= “N15” style=&quot;text-align:center&quot; title=&quot;“sū“ revive, resurrect; a species of thyme&quot; class=&quot;green&quot;&gt;苏&lt;/td&gt;
          &lt;td id= “O15” style=&quot;text-align:center&quot; title=&quot;“xīn“ heart; mind, intelligence; soul&quot; class=&quot;red&quot; &gt;心&lt;/td&gt;
          &lt;td id= “P15” style=&quot;text-align:center&quot; title=&quot;“jī“ pearl that is not quite round&quot; class=&quot;green&quot;&gt;玑&lt;/td&gt;
          &lt;td id= “Q15” style=&quot;text-align:center&quot; title=&quot;“míng“ bright, light, brilliant; clear&quot; class=&quot;yellow&quot;&gt;明&lt;/td&gt;
                
      &lt;/tr&gt;                   
      &lt;tr&gt;                    
         
          &lt;td id= “M16” style=&quot;text-align:center&quot; title=&quot;“lì, lí“ beautiful, magnificent, elegant&quot; class=&quot;yellow&quot;&gt;丽&lt;/td&gt;
          &lt;td id= “N16” style=&quot;text-align:center&quot; title=&quot;“shì, zhī, jīng“ clan, family; mister&quot; class=&quot;green&quot;&gt;氏&lt;/             td&gt;
          &lt;td id= “O16” style=&quot;text-align:center&quot; title=&quot;“shī“ poetry; poem, verse, ode&quot;  class=&quot;green&quot;&gt;诗&lt;/td&gt;
          &lt;td id= “P16” style=&quot;text-align:center&quot; title=&quot;“tú“ diagram; chart, map, picture&quot; class=&quot;green&quot; &gt;图&lt;/td&gt;
          &lt;td id= “Q16” style=&quot;text-align:center&quot; title=&quot;“xiǎn“ manifest, display; evident, clear&quot; class=&quot;yellow&quot; &gt;显          &lt;/td&gt;
      &lt;/tr&gt;                   
      &lt;tr&gt;
          &lt;td id= “M17” style=&quot;text-align:center&quot; title=&quot;“cí“ words, speech, expression, phrase&quot; class=&quot;yellow&quot; &gt;辞&lt;/          td&gt;
          &lt;td id= “N17” style=&quot;text-align:center&quot; title=&quot;“lǐ“ reason, logic; manage&quot; class=&quot;yellow&quot; &gt;理&lt;/td&gt;
          &lt;td id= “O17” style=&quot;text-align:center&quot; title=&quot;“xīng, xìng“ thrive, prosper, flourish&quot; class=&quot;yellow&quot; &gt;兴&lt;/          td&gt;
          &lt;td id= “P17” style=&quot;text-align:center&quot; title=&quot;“yì“ right conduct, righteousness&quot; class=&quot;yellow&quot; &gt;义&lt;/td&gt;
          &lt;td id= “Q17” style=&quot;text-align:center&quot; title=&quot;“yuàn“ hatred, enmity, resentment&quot; class=&quot;yellow&quot; &gt;怨&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br&gt;                    
  </code></pre>
  
  
  <p>And here's the CSS:</p>
  <pre><code>type=&quot;text/css&quot;&gt;                                                                                            
  .table  
      {
          border-collapse:collapse;
          border-spacing:0;
      }                                                                               
  .table  td
      {
          font-family:Verdana,sans-serif;
          font-size:19px;
          padding:10px 5px;
          border-style:solid;
          border-width:1px;
          overflow:hidden;
          word-break:normal;
      }
  .table  
      .red    {color:#fe0000}                                                                                             
      .green  {color:#32cb00}                                                                                         
      .yellow {color:#ffc702}
  </code></pre>
  <p>The JAVAScript lookup table I have is:</p>
  <pre><code>var lookupTable = {
      &quot;端无终始诗&quot;:&quot;The beginning of this poem starts at the end,&quot;,
      &quot;比平始璇情&quot;:&quot;It begins peacefully like a smooth jade star&quot;,
      &quot;作苏心玑明&quot;:&quot;Its creation revived my twisted heart&quot;,
      &quot;丽氏诗图显&quot;:&quot;Clearly this star-chart poem is a classic&quot;,
      &quot;辞理兴义怨&quot;:&quot;Knowledge thrives where good calls out evil&quot;,
      &quot;端比作丽辞&quot;:&quot;The beginning of this work is like a great speech&quot;};
  </code></pre>
  <p>(note that not all click-combinations will produce an English translation).</p>
  <p>What I'm having trouble with is:</p>
  <ol>
  <li>Creating an event listener that will detect clicks and send the cell
  contents to the Chinese text box</li>
  <li>Looking up the text in the Chinese box with the lookup table and</li>
  <li>Displaying the results in the English translation box.</li>
  </ol>
  <p>Any help would be greatly appreciated. Especially written code!</p>