javascript - 接受输入并在表格上突出显示答案的 HTML/Javascript 乘法表

Question

如标题所述，我需要使用 JS 和 HTML 制作一个乘法表，它需要两个用户输入并在表上突出显示答案。我已经制作了表格，我只是在苦苦思索如何从 ID“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=''>


    

Answer 1

我用你的代码风格尝试了一个简单的答案。

只需将输入的事件“onkeyup”绑定(bind)到突出显示结果单元格的函数即可。

为了识别每个单元格，我为每个单元格添加了一个 ID 和一个类。 id 是两个索引和边界单元格与其他单元格之间的类差异的串联。

要突出显示结果单元格，您可以使用输入值并使用它们构建结果单元格的 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()">