blocks|key|4010921|text|重要提示:在创建元素和向DOM添加新内容时，不要使用document.write，请为此使用正确的API，例如document.createElement，这样您可以更好地管理元素。在下面的代码中，我使用它作为示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4010922|在创建表之后，您将需要一个函数来获取值并进行验证和数学运算。另外，添加操作数i和j+(示例："i_j")作为每个<td>的id+(注意不要有任何重复的id)，这样就可以轻松找到应该突出显示的td。|4010923|此外，您应该有一些方法来清除已经突出显示的td的背景色，为此，我使用了一个名为cleanTds的辅助函数。|4010924|看一看：|4010925|​|4010926|var+color_td;
let+table+=+document.createElement("table");
document.body.appendChild(table);

for(var+i+=+1;+i+<+11;+i%2B%2B)+{
++let+tr+=+document.createElement("tr");
++tr.style.height+=+"30px"
++table.appendChild(tr);
++var+color_class;

++for(var+j+=+1;+j+<+11;+j%2B%2B)+{
++++if(j+==+1+%7C%7C+i+==+1)+{
++++++++color_class+=+"grayBg";
++++}
++++else+{
++++++++color_class+=+"whiteBg";
++++}
++++let+td+=+document.createElement("td");
++++td.className+=+"tdClass+"+%2B+color_class;
++++td.id+=+i+%2B"_"%2B+j;
++++td.style.background+=+color_td;
++++td.textContent+=+i+*+j;
++++tr.appendChild(td);
++}
}

document.getElementById("calc").onclick+=+(ev)+=>+{
++cleanTds()
++let+val1+=+document.getElementById("leftOp").value;
++let+val2+=+document.getElementById("rightOp").value;
++if+(val1+==+null+%7C%7C+val1+==+""){+val1+=+0}
++if+(val2+==+null+%7C%7C+val2+==+""){+val2+=+0}
++
++let+tdResult+=+document.getElementById(val1+%2B+"_"+%2B+val2)
++if+(tdResult+!=+null){
++++tdResult.style.background+=+"green";
++}++
}

function+cleanTds(){
++let+tds+=+document.querySelectorAll("td");
++for+(var+td+of+tds){
++++td.style.background+=+""
++}
}|code-block|syntax|javascript|4010927|.tdClass{
++height:+30px;
++width:+30px;
++border:+1px+solid;
}

.grayBg{
++background:+#ccc;
}

.whiteBg{
++background:+#fff;
}|4010928|<input+type='text'+id='leftOp'+value=''>
<input+type='text'+id='rightOp'+value=''>
<button+id="calc">Calculate</button>|4010929|4010930|entityMap^0|Q|E|1J|M|0|12|1|14|1|1B|3|1K|4|1P|2|2N|2|0|13|8|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1K|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1L|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1M|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|P|7|1N|8|@]|D|@]|E|$Q|R]]|$1|U|3|V|5|P|7|1O|8|@]|D|@]|E|$Q|R]]|$1|W|3|M|5|6|7|1P|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|Y|$]]

<p>Important tip: Doesn't use <code>document.write</code> when creating elements and appending new things to DOM, use the correct API for that, such as <code>document.createElement</code> that you can manage the elements much better. In my code below I'm using it to show you as example.</p>

<p>After creating the table, you'll need a function to get the values and the do the verifications and Maths. Also, add the operands <code>i</code> and <code>j</code> (example: "<code>i_j</code>") as the <code>id</code> of each <code>&lt;td&gt;</code> (take care to not have any repeated id), that way you'll have an easy way to found the <code>td</code> you should highlight.</p>

<p>Also, you should have some way to clear the background color of the td which is already highlighted, for that I used an auxiliar function called <code>cleanTds</code>.</p>

<p>Take a look:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var color_td;
let table = document.createElement("table");
document.body.appendChild(table);

for(var i = 1; i &lt; 11; i++) {
  let tr = document.createElement("tr");
  tr.style.height = "30px"
  table.appendChild(tr);
  var color_class;

  for(var j = 1; j &lt; 11; j++) {
    if(j == 1 || i == 1) {
        color_class = "grayBg";
    }
    else {
        color_class = "whiteBg";
    }
    let td = document.createElement("td");
    td.className = "tdClass " + color_class;
    td.id = i +"_"+ j;
    td.style.background = color_td;
    td.textContent = i * j;
    tr.appendChild(td);
  }
}

document.getElementById("calc").onclick = (ev) =&gt; {
  cleanTds()
  let val1 = document.getElementById("leftOp").value;
  let val2 = document.getElementById("rightOp").value;
  if (val1 == null || val1 == ""){ val1 = 0}
  if (val2 == null || val2 == ""){ val2 = 0}
  
  let tdResult = document.getElementById(val1 + "_" + val2)
  if (tdResult != null){
    tdResult.style.background = "green";
  }  
}

function cleanTds(){
  let tds = document.querySelectorAll("td");
  for (var td of tds){
    td.style.background = ""
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.tdClass{
  height: 30px;
  width: 30px;
  border: 1px solid;
}

.grayBg{
  background: #ccc;
}

.whiteBg{
  background: #fff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='text' id='leftOp' value=''&gt;
&lt;input type='text' id='rightOp' value=''&gt;
&lt;button id="calc"&gt;Calculate&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4010990|text|我用你的代码风格尝试了一个简单的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4010991|只需将输入的事件"onkeyup“绑定到突出显示结果单元格的函数。|4010992|为了标识每个单元格，我为每个单元格添加一个id和一个类。id是两个索引和边界单元格与其他单元格之间的类别差异的串联。|4010993|要突出显示rersult单元格，可以使用输入值并使用它们构建结果单元格的id。|4010994|不要忘记在每次调用时重置单元格的颜色。|4010995|​|4010996|var+color_td;
document.write("<table+border='1px'>");

for+(var+i+=+1;+i+<+11;+i%2B%2B)+{
++++var+id;
++++var+cellClass;
++++document.write("<tr+style='height:30px;'>");

++++for+(var+j+=+1;+j+<+11;+j%2B%2B)+{
++++++++id+=+'cell-'+%2B+i+%2B+'-'+%2B+j;
++++++++if+(j+==+1+%7C%7C+i+==+1)+{
++++++++++++color_td+=+"#ccc";
++++++++++++cellClass+=+"border-cell";
++++++++}
++++++++else+{
++++++++++++color_td+=+"#fff";
++++++++++++cellClass+=+"result-cell";
++++++++}

++++++++document.write("<td+class='"+%2B+cellClass+%2B+"'+id='"+%2B+id+%2B+"'+style='width:30px;background-color:"+%2B+color_td+%2B+"'>"+%2B+i+*+j+%2B+"</td>");
++++}
++++document.write("</tr>");
}

document.write("</table>");

function+inputChange()+{
++++var+left+=+document.getElementById('leftOp').value;
++++var+right+=+document.getElementById('rightOp').value;

++++if+(!left+%7C%7C+!right+%7C%7C+left+>+10+%7C%7C+left+<+1+%7C%7C+right+>+10+%7C%7C+left+<+1)+{
++++++++return;
++++}

++++var+cells+=+document.getElementsByClassName('result-cell');
++++for+(var+i+=+0;+i+<+cells.length;+i%2B%2B)+{
++++++++var+cell+=+cells[i];
++++++++cell.style.backgroundColor+=+'#fff';
++++}
++++
++++var+cells+=+document.getElementsByClassName('border-cell');
++++for+(var+i+=+0;+i+<+cells.length;+i%2B%2B)+{
++++++++var+cell+=+cells[i];
++++++++cell.style.backgroundColor+=+'#ccc';
++++}

++++var+resultCell+=+document.getElementById('cell-'+%2B+left+%2B+'-'+%2B+right);
++++resultCell.style.backgroundColor+=+'#5fc047';
}|code-block|syntax|javascript|4010997|<input+type='text'+id='leftOp'+value=''+onkeyup="inputChange()">
<input+type='text'+id='rightOp'+value=''+onkeyup="inputChange()">+|4010998|4010999|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|11|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|12|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p>I tried a simple answer with your code style.</p>

<p>Just bind the event "onkeyup" of your inputs to a function that highlight the result cell.</p>

<p>To identify each cell, I add an id and a class to each one. The id is a concatenation of the two indexes and the class difference between border cells and other cells.</p>

<p>To hightlight the rersult cell, you use the inputs values and build the id of the result cell with them.</p>

<p>Don't forget to reset the cells colors on each invocation.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var color_td;
document.write("&lt;table border='1px'&gt;");

for (var i = 1; i &lt; 11; i++) {
    var id;
    var cellClass;
    document.write("&lt;tr style='height:30px;'&gt;");

    for (var j = 1; j &lt; 11; j++) {
        id = 'cell-' + i + '-' + j;
        if (j == 1 || i == 1) {
            color_td = "#ccc";
            cellClass = "border-cell";
        }
        else {
            color_td = "#fff";
            cellClass = "result-cell";
        }

        document.write("&lt;td class='" + cellClass + "' id='" + id + "' style='width:30px;background-color:" + color_td + "'&gt;" + i * j + "&lt;/td&gt;");
    }
    document.write("&lt;/tr&gt;");
}

document.write("&lt;/table&gt;");

function inputChange() {
    var left = document.getElementById('leftOp').value;
    var right = document.getElementById('rightOp').value;

    if (!left || !right || left &gt; 10 || left &lt; 1 || right &gt; 10 || left &lt; 1) {
        return;
    }

    var cells = document.getElementsByClassName('result-cell');
    for (var i = 0; i &lt; cells.length; i++) {
        var cell = cells[i];
        cell.style.backgroundColor = '#fff';
    }
    
    var cells = document.getElementsByClassName('border-cell');
    for (var i = 0; i &lt; cells.length; i++) {
        var cell = cells[i];
        cell.style.backgroundColor = '#ccc';
    }

    var resultCell = document.getElementById('cell-' + left + '-' + right);
    resultCell.style.backgroundColor = '#5fc047';
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='text' id='leftOp' value='' onkeyup="inputChange()"&gt;
&lt;input type='text' id='rightOp' value='' onkeyup="inputChange()"&gt; 
  </code></pre>
</div>
</div>
</p>


blocks|key|4011041|text|这应该可以让你开始学习了。当按下enter键时触发|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4011042|​|4011043|var+color_td;
document.write("<table+border='1px'>");

for(var+i+=+1;+i+<+11;+i%2B%2B)+{
++document.write("<tr+style='height:30px;'>");

++for(var+j+=+1;+j+<+11;+j%2B%2B)+{
+++var+idName+=+'R'%2Bi+%2B+'C'+%2B+j;
++++if(j+==+1+%7C%7C+i+==+1)+{
+++++++
++++++++color_td+=+"#ccc";
++++}
++++else+{
++++++++color_td+=+"#fff";
++++}

++++document.write("<td+id='"%2BidName+%2B+"'style='width:30px;background-color:"+%2B++++++++++++color_td+%2B+"'>"+%2B+i*j+%2B+"</td>");
++}
++document.write("</tr>");
}

document.write("</table>");

left+=+document.getElementById("leftOp");
right+=+document.getElementById("rightOp");

document.getElementById("rightOp")
++++.addEventListener("keyup",+function(event)+{
++++event.preventDefault();
++++if+(event.keyCode+===+13)+{
++++++++left+=+document.getElementById("leftOp");
++++++++right+=+document.getElementById("rightOp");
++++++++
++++++++var+idName+=+'R'+%2B+leftOp.value+%2B+'C'+%2B+rightOp.value;
++++++
+++++++document.getElementById(idName).style.backgroundColor+=+"lightblue";
++++}
});|code-block|syntax|javascript|4011044|<input+type='text'+id='leftOp'+value=''>
<input+type='text'+id='rightOp'+value=''+>|4011045|4011046|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This should get you started.  it's triggered when the enter key is pressed</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var color_td;
document.write("&lt;table border='1px'&gt;");

for(var i = 1; i &lt; 11; i++) {
  document.write("&lt;tr style='height:30px;'&gt;");

  for(var j = 1; j &lt; 11; j++) {
   var idName = 'R'+i + 'C' + j;
    if(j == 1 || i == 1) {
       
        color_td = "#ccc";
    }
    else {
        color_td = "#fff";
    }

    document.write("&lt;td id='"+idName + "'style='width:30px;background-color:" +            color_td + "'&gt;" + i*j + "&lt;/td&gt;");
  }
  document.write("&lt;/tr&gt;");
}

document.write("&lt;/table&gt;");

left = document.getElementById("leftOp");
right = document.getElementById("rightOp");

document.getElementById("rightOp")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        left = document.getElementById("leftOp");
        right = document.getElementById("rightOp");
        
        var idName = 'R' + leftOp.value + 'C' + rightOp.value;
      
       document.getElementById(idName).style.backgroundColor = "lightblue";
    }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='text' id='leftOp' value=''&gt;
&lt;input type='text' id='rightOp' value='' &gt;</code></pre>
</div>
</div>
</p>


<p>As the title states, I need to make a multiplication table using JS and HTML that takes two user inputs and highlights the answer on the table. I have the table made, I'm just struggling with how to take the user inputs from the ids "leftOp" and "rightOp" and highlighting the answer on the table. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var color_td;
document.write("&lt;table border='1px'&gt;");

for(var i = 1; i &lt; 11; i++) {
  document.write("&lt;tr style='height:30px;'&gt;");

  for(var j = 1; j &lt; 11; j++) {
    if(j == 1 || i == 1) {
        color_td = "#ccc";
    }
    else {
        color_td = "#fff";
    }

    document.write("&lt;td style='width:30px;background-color:" +            color_td + "'&gt;" + i*j + "&lt;/td&gt;");
  }
  document.write("&lt;/tr&gt;");
}

document.write("&lt;/table&gt;");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='text' id='leftOp' value=''&gt;
&lt;input type='text' id='rightOp' value=''&gt;


    </code></pre>
</div>
</div>
</p>


HTML/Javascript multiplication table that takes inputs and highlights the answer on table

正如标题所述，我需要使用JS和HTML制作一个乘法表，该表接受两个用户输入并突出显示表上的答案。我已经制作好了表格，我只是在努力解决如何从ids "leftOp“和"rightOp”中获取用户输入，并在表格上突出显示答案。​var color_td;document.write("<table border='1px'...

问HTML/Javascript乘法表，接受输入并在表中突出显示答案
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/Javascript乘法表，接受输入并在表中突出显示答案EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/Javascript乘法表，接受输入并在表中突出显示答案
EN