HTML/Javascript乘法表，接受输入并在表中突出显示答案
HTML/Javascript乘法表，接受输入并在表中突出显示答案
提问于 2018-10-23 03:13:03
正如标题所述，我需要使用JS和HTML制作一个乘法表，该表接受两个用户输入并突出显示表上的答案。我已经制作好了表格，我只是在努力解决如何从ids "leftOp“和"rightOp”中获取用户输入，并在表格上突出显示答案。
var color_td;
document.write("<table border='1px'>");
for(var i = 1; i < 11; i++) {
document.write("<tr style='height:30px;'>");
for(var j = 1; j < 11; j++) {
if(j == 1 || i == 1) {
color_td = "#ccc";
}
else {
color_td = "#fff";
}
document.write("<td style='width:30px;background-color:" + color_td + "'>" + i*j + "</td>");
}
document.write("</tr>");
}
document.write("</table>");<input type='text' id='leftOp' value=''>
<input type='text' id='rightOp' value=''>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-10-23 03:54:41
重要提示:在创建元素和向DOM添加新内容时，不要使用document.write，请为此使用正确的API，例如document.createElement，这样您可以更好地管理元素。在下面的代码中，我使用它作为示例。
在创建表之后，您将需要一个函数来获取值并进行验证和数学运算。另外，添加操作数i和j (示例："i_j")作为每个<td>的id (注意不要有任何重复的id)，这样就可以轻松找到应该突出显示的td。
此外，您应该有一些方法来清除已经突出显示的td的背景色，为此，我使用了一个名为cleanTds的辅助函数。
看一看：
var color_td;
let table = document.createElement("table");
document.body.appendChild(table);
for(var i = 1; i < 11; i++) {
let tr = document.createElement("tr");
tr.style.height = "30px"
table.appendChild(tr);
var color_class;
for(var j = 1; j < 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) => {
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 = ""
}
}.tdClass{
height: 30px;
width: 30px;
border: 1px solid;
}
.grayBg{
background: #ccc;
}
.whiteBg{
background: #fff;
}<input type='text' id='leftOp' value=''>
<input type='text' id='rightOp' value=''>
<button id="calc">Calculate</button>
Stack Overflow用户
发布于 2018-10-23 04:20:55
我用你的代码风格尝试了一个简单的答案。
只需将输入的事件"onkeyup“绑定到突出显示结果单元格的函数。
为了标识每个单元格，我为每个单元格添加一个id和一个类。id是两个索引和边界单元格与其他单元格之间的类别差异的串联。
要突出显示rersult单元格，可以使用输入值并使用它们构建结果单元格的id。
不要忘记在每次调用时重置单元格的颜色。
var color_td;
document.write("<table border='1px'>");
for (var i = 1; i < 11; i++) {
var id;
var cellClass;
document.write("<tr style='height:30px;'>");
for (var j = 1; j < 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("<td class='" + cellClass + "' id='" + id + "' style='width:30px;background-color:" + color_td + "'>" + i * j + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
function inputChange() {
var left = document.getElementById('leftOp').value;
var right = document.getElementById('rightOp').value;
if (!left || !right || left > 10 || left < 1 || right > 10 || left < 1) {
return;
}
var cells = document.getElementsByClassName('result-cell');
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.style.backgroundColor = '#fff';
}
var cells = document.getElementsByClassName('border-cell');
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.style.backgroundColor = '#ccc';
}
var resultCell = document.getElementById('cell-' + left + '-' + right);
resultCell.style.backgroundColor = '#5fc047';
}<input type='text' id='leftOp' value='' onkeyup="inputChange()">
<input type='text' id='rightOp' value='' onkeyup="inputChange()">
Stack Overflow用户
发布于 2018-10-23 04:30:08
这应该可以让你开始学习了。当按下enter键时触发
var color_td;
document.write("<table border='1px'>");
for(var i = 1; i < 11; i++) {
document.write("<tr style='height:30px;'>");
for(var j = 1; j < 11; j++) {
var idName = 'R'+i + 'C' + j;
if(j == 1 || i == 1) {
color_td = "#ccc";
}
else {
color_td = "#fff";
}
document.write("<td id='"+idName + "'style='width:30px;background-color:" + color_td + "'>" + i*j + "</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' + leftOp.value + 'C' + rightOp.value;
document.getElementById(idName).style.backgroundColor = "lightblue";
}
});<input type='text' id='leftOp' value=''>
<input type='text' id='rightOp' value='' >
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52936289
复制相关文章
相似问题