HTML/Javascript乘法表，它接受输入并突出显示表上的答案

正如标题所述，我需要使用JS和HTML制作一个乘法表，它接受两个用户输入，并在表上突出显示答案。我制作了这个表，我正在努力从ids leftOp和rightOp获取用户输入，并在表上突出显示答案

色差； 文件。书写； forvar i=1；i<11；i++{ 文件。书写； forvar j=1；j<11；j++{ ifj==1 | | i==1{ 颜色=ccc； } 否则{ 颜色_td=fff； } document.write+i*j+； } 文件。书写； } 文件。书写；

---

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

创建表之后，需要一个函数来获取值，并进行验证和数学运算。另外，添加操作数i和j例如：i_j作为每个操作数的id，注意不要有任何重复的id，这样您就可以轻松找到应该高亮显示的td

另外，您应该有一些方法来清除已经高亮显示的td的背景色，因为我使用了一个名为cleanTds的辅助函数

看一看:

色差； let table=document.createElementtable； document.body.appendChildtable； forvar i=1；i<11；i++{ 设tr=document.createElementtr； tr.style.height=30px 表1.1-tr； 颜色等级； forvar j=1；j<11；j++{ ifj==1 | | i==1{ 颜色等级=灰色背景； } 否则{ 颜色等级=白色背景； } 设td=document.createElementtd； td.className=tdClass+color\u class； td.id=i+uj； td.style.background=color\u td； td.textContent=i*j； tr.td； } } document.getElementByIdcalc.onclick=ev=>{ 清洁剂 设val1=document.getElementByIdleftOp.value； 设val2=document.getElementByIdrightOp.value； 如果val1==null | | val1=={val1=0} 如果val2==null | | val2=={val2=0} 让tdResult=document.getElementByIdval1+\uVal2 如果tdResult！=null{ tdResult.style.background=绿色； } } 函数cleanTds{ 设tds=document.querySelectorAlltd； 对于tds的var td{ td.style.background= } } .tdClass{ 高度：30px； 宽度：30px； 边框：1px实心； } 格雷格先生{ 背景：ccc； } 怀特先生{ 背景：fff； }

---

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

创建表之后，需要一个函数来获取值，并进行验证和数学运算。另外，添加操作数i和j例如：i_j作为每个操作数的id，注意不要有任何重复的id，这样您就可以轻松找到应该高亮显示的td

另外，您应该有一些方法来清除已经高亮显示的td的背景色，因为我使用了一个名为cleanTds的辅助函数

看一看:

色差； let table=document.createElementtable； document.body.appendChildtable； forvar i=1；i<11；i++{ 设tr=document.createElementtr； tr.style.height=30px 表1.1-tr； 颜色等级； forvar j=1；j<11；j++{ ifj==1 | | i==1{ 颜色等级=灰色背景； } 否则{ 颜色等级=白色背景； } 设td=document.createElementtd； td.className=tdClass+color\u class； td.id=i+uj； td.style.background=color\u td； td.textContent=i*j； tr.td； } } document.getElementByIdcalc.onclick=ev=>{ 清洁剂 设val1=document.getElementByIdleftOp.value； 设val2=document.getElementByIdrightOp.value； 如果val1==null | | val1=={val1=0} 如果val2==null | | val2=={val2=0} 让tdResult=document.getElementByIdval1+\uVal2 如果tdResult！=null{ tdResult.style.background=绿色； } } 函数cleanTds{ 设tds=document.querySelectorAlltd； 对于tds的var td{ td.style.background= } } .tdClass{ 高度：30px； 宽度：30px； 边框：1px实心； } 格雷格先生{ 背景：ccc； } 怀特先生{ 背景：fff； }

---

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

只需将输入的事件onkeyup绑定到一个突出显示结果单元格的函数

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

要高亮显示重新结果单元格，请使用输入值并使用它们构建结果单元格的id

不要忘记在每次调用时重置单元格颜色

变量c 颜色； 文件。书写； 对于var i=1；i<11；i++{ 变量id； 细胞级； 文件。书写； 对于var j=1；j<11；j++{ id='单元-'+i+'-'+j； 如果j==1 | | i==1{ 颜色=ccc； cellClass=边界单元； } 否则{ 颜色_td=fff； cellClass=结果单元格； } document.write+i*j+； } 文件。书写； } 文件。书写； 函数输入更改{ var left=document.getElementById'leftOp'。值； var right=document.getElementById'rightOp'。值； 如果！左| |！右| |左>10 | |左<1 | |右>10 | |左<1{ 回来 } var cells=document.getElementsByClassName'result-cell'； 对于变量i=0；i我用你的代码风格尝试了一个简单的答案

只需将输入的事件onkeyup绑定到一个突出显示结果单元格的函数

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

要高亮显示重新结果单元格，请使用输入值并使用它们构建结果单元格的id

不要忘记在每次调用时重置单元格颜色

色差； 文件。书写； 对于var i=1；i<11；i++{ 变量id； 细胞级； 文件。书写； 对于var j=1；j<11；j++{ id='单元-'+i+'-'+j； 如果j==1 | | i==1{ 颜色=ccc； cellClass=边界单元； } 否则{ 颜色_td=fff； cellClass=结果单元格； } document.write+i*j+； } 文件。书写； } 文件。书写； 函数输入更改{ var left=document.getElementById'leftOp'。值； var right=document.getElementById'rightOp'。值； 如果！左| |！右| |左>10 | |左<1 | |右>10 | |左<1{ 回来 } var cells=document.getElementsByClassName'result-cell'； 对于变量i=0；i这应该让你开始。按下enter键时会触发该功能

色差； 文件。书写； forvar i=1；i<11；i++{ 文件。书写； forvar j=1；j<11；j++{ 变量idName='R'+i+'C'+j； ifj==1 | | i==1{ 颜色=ccc； } 否则{ 颜色_td=fff； } document.write+i*j+； } 文件。书写； } 文件。书写； 左=document.getElementByIdleftOp； right=document.getElementByIdrightOp； document.getElementByIdrightOp .addEventListenerkeyup，functionevent{ 违约事件； 如果event.keyCode==13{ 左=document.getElementByIdleftOp； right=document.getElementByIdrightOp； 变量idName='R'+leftOp.value+'C'+rightOp.value； document.getElementByIdidName.style.backgroundColor=浅蓝色； } };

---

这应该让你开始。按下enter键时会触发该功能

色差； 文件。书写； forvar i=1；i<11；i++{ 文件。书写； forvar j=1；j<11；j++{ 变量idName='R'+i+'C'+j； ifj==1 | | i==1{ 颜色=ccc； } 否则{ 颜色_td=fff； } document.write+i*j+； } 文件。书写； } 文件。书写； 左=document.getElementByIdleftOp； right=document.getElementByIdrightOp； document.getElementByIdrightOp .addEventListenerkeyup，functionevent{ 违约事件； 如果event.keyCode==13{ 左=document.getElementByIdleftOp； right=document.getElementByIdrightOp； 变量idName='R'+leftOp.value+'C'+rightOp.value； document.getElementByIdidName.style.backgroundColor=浅蓝色； } };

---

document.write可能不是您想要的，因为您现在没有时间写出完整的答案，但一般来说，请查看document.getElementById。您可以使用它来获取要处理的值，然后在处理后设置它们。document.write可能不是您想要的，因为您现在没有时间写出完整的答案，但一般来说，请查看document.getElementById

---

. 你可以用它来获取要处理的值，然后在处理后设置它们。这正是我想要实现的。你是救命恩人。我的教授不太擅长解释，我现在有点迷恋javascript。一定会以此作为参考=这正是我想要实现的。你是救命恩人。我的教授不太擅长解释，我现在有点迷恋javascript。一定会以此作为参考=D