HTML / Javascript乘法表接收输入并突出显示表上的答案?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (95)

正如标题所述,我需要使用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=''>


    
提问于
用户回答回答于

这应该让你开始,按下回车键时触发

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='' >
用户回答回答于

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

只需将输入的事件“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()"> 
  

扫码关注云+社区

领取腾讯云代金券