Question

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

Answer 1

我用您的代码样式尝试了一个简单的答案。

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

要识别每个单元格，我向每个单元格添加一个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()">

Answer 2

重要提示：在创建元素并将新内容添加到DOM时不使用document.write，为此使用正确的API，例如document.createElement，您可以更好地管理元素。在下面的代码中，我将其用作示例。

创建表后，您将需要一个函数来获取值以及进行验证和数学运算。另外，将操作数i和j（例如：“ i_j”）添加为每个id的{{1}}（注意不要重复编号）），这样您就可以轻松找到要突出显示的<td>。

此外，您应该有一些方法可以清除已经突出显示的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;
}

Answer 3

这应该使您入门。按下回车键会触发

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='' >

HTML / JavaScript乘法表，该表接受输入并突出显示表中的答案

3 个答案: