用于表和查找表的Javascript

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:

我正在尝试建立一个网站，每个单元格中都有一个包含中文字符的表格。用户单击单个单元格，每个单元格中的字符显示在表格旁边的文本框中。在查找表中找到字符序列，并在第二个文本框中提供英语翻译。这是HTML：

<html>
<head>
    <head>
    <title>
        Practice translation
    </title>
    <script 
        src="http://code.jquery.com/jquery-1.9.1.min.js">
    </script>
    <script 
        type="text/javascript" 
        src="Small1.js">
    </script>                                                       
    <meta 
        http-equiv="Content-Type" 
        content="text/html; charset=UTF-8">
    <link 
        rel="shortcut icon" 
        href="/favicon.ico" 
        type="image/x-icon">    
    <link 
        rel="stylesheet" 
        type="text/css" 
        href="Small1.css">
    <link 
        rel="shortcut icon" 
        href="Pallindrome.ico" 
        type="image/x-icon">
    <link 
        rel="icon" 
        href="Pallindrome.ico" 
        type="image/x-icon">
</head>
</head>
<body>  
    <table  style="text-align:center">
        <tbody> 
    <tr>                    
        <td id= “M13” style="text-align:center" title="“duān“ end, extreme; head; beginning" class="yellow">端</td>
        <td id= “N13” style="text-align:center" title="“wú, mó“ negative, no, not; KangXi radical 71" class="yellow">无</td>
        <td id= “O13” style="text-align:center" title="“zhōng“ end; finally, in the end" color="#f1c232" class="yellow">终</td>
        <td id= “P13” style="text-align:center" title="“shǐ“ begin, start; then, only then" class="yellow">始</td>
        <td id= “Q13” style="text-align:center" title="“shī“ poetry; poem, verse, ode"class="yellow">诗</td>

    </tr>                   
    <tr>                    

        <td id= “M14” style="text-align:center" title="“bǐ, bì, pí, pǐ“ to compare, liken; comparison; than" class="yellow">比</td>
        <td id= “N14” style="text-align:center" title="“píng“ flat, level, even; peaceful" class="green" >平</td>
        <td id= “O14” style="text-align:center" title="“shǐ“ begin, start; then, only then" class="green">始</td>
        <td id= “P14” style="text-align:center" title="“xuán“ beautiful jade; star" class="green">璇</td>
        <td id= “Q14” style="text-align:center" title="“qíng“ feeling, sentiment, emotion" class="yellow">情</td>  

    </tr>                   
    <tr>

        <td id= “M15” style="text-align:center" title="“zuò, zuō, zuó“ make; work; compose, write; act, perform" class="yellow">作</td>
        <td id= “N15” style="text-align:center" title="“sū“ revive, resurrect; a species of thyme" class="green">苏</td>
        <td id= “O15” style="text-align:center" title="“xīn“ heart; mind, intelligence; soul" class="red" >心</td>
        <td id= “P15” style="text-align:center" title="“jī“ pearl that is not quite round" class="green">玑</td>
        <td id= “Q15” style="text-align:center" title="“míng“ bright, light, brilliant; clear" class="yellow">明</td>

    </tr>                   
    <tr>                    

        <td id= “M16” style="text-align:center" title="“lì, lí“ beautiful, magnificent, elegant" class="yellow">丽</td>
        <td id= “N16” style="text-align:center" title="“shì, zhī, jīng“ clan, family; mister" class="green">氏</             td>
        <td id= “O16” style="text-align:center" title="“shī“ poetry; poem, verse, ode"  class="green">诗</td>
        <td id= “P16” style="text-align:center" title="“tú“ diagram; chart, map, picture" class="green" >图</td>
        <td id= “Q16” style="text-align:center" title="“xiǎn“ manifest, display; evident, clear" class="yellow" >显          </td>
    </tr>                   
    <tr>
        <td id= “M17” style="text-align:center" title="“cí“ words, speech, expression, phrase" class="yellow" >辞</          td>
        <td id= “N17” style="text-align:center" title="“lǐ“ reason, logic; manage" class="yellow" >理</td>
        <td id= “O17” style="text-align:center" title="“xīng, xìng“ thrive, prosper, flourish" class="yellow" >兴</          td>
        <td id= “P17” style="text-align:center" title="“yì“ right conduct, righteousness" class="yellow" >义</td>
        <td id= “Q17” style="text-align:center" title="“yuàn“ hatred, enmity, resentment" class="yellow" >怨</td>
    </tr>
    </tbody>
</table>
<br>

And here's the CSS:

这是CSS：

type="text/css">                                                                                            
.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}

The JAVAScript lookup table I have is:

我有的JAVAScript查找表是：

var lookupTable = {
    "端无终始诗":"The beginning of this poem starts at the end,",
    "比平始璇情":"It begins peacefully like a smooth jade star",
    "作苏心玑明":"Its creation revived my twisted heart",
    "丽氏诗图显":"Clearly this star-chart poem is a classic",
    "辞理兴义怨":"Knowledge thrives where good calls out evil",
    "端比作丽辞":"The beginning of this work is like a great speech"};

(note that not all click-combinations will produce an English translation).

（请注意，并非所有点击组合都会产生英文翻译）。

What I'm having trouble with is:

我遇到的问题是：

Creating an event listener that will detect clicks and send the cell contents to the Chinese text box
创建一个事件侦听器，它将检测点击并将单元格内容发送到中文文本框
Looking up the text in the Chinese box with the lookup table and
用查找表和查找中文框中的文本
Displaying the results in the English translation box.
在英语翻译框中显示结果。

Any help would be greatly appreciated. Especially written code!

任何帮助将不胜感激。特别是代码！

Thanks

谢谢

1 个解决方案

#1

Add a couple elements for the results:

为结果添加几个元素：

<div id=output></div>
<div id=translation></div>

Then this code will process the clicks and produce the results:

然后，此代码将处理点击并生成结果：

function processClick(event) {
   var elem = $('#output');
   elem.text(elem.text() + $(event.target).text());
   $('#translation').text(lookupTable[elem.text()]);
   }
$(document).on('click', 'td', processClick);

Fiddle with the code:
http://jsfiddle.net/6wjeuymj/1/

摆弄代码：http：//jsfiddle.net/6wjeuymj/1/

Note that a wrapper around the table (and results elements) with a class name (example: <div class=translator-puzzle>...</div>) would enable you to write cleaner (and safer) code by effectively making a reusable component relying on classes instead of ids.

请注意，具有类名称的表（和结果元素）周围的包装器（例如：

... ）将使您能够通过有效地创建更清晰（更安全）的代码依赖于类而不是id的可重用组件。

#1