Javascript 高亮显示表格左下半部分的单元格（三角形）

我有一个html表，它是根据提供的行数和列数动态创建的。 我已经成功创建了表格，现在我想用浅红色突出显示表格左下半部分（三角形）上的单元格。与附件中的相同

我用来创建表的代码

//事件处理程序函数
函数打印_表（）{
让我们来看看，我的名字是什么；
_tblRows=document.getElementById（'rows'）.value；
_tblCols=document.getElementById（'cols'）.value；
randNmbrArray=[]；
_tblDiv=document.getElementById（'my_table'）
avgElm=document.getElementById（'average'）；
如果（\u tblRows==“”）{
警告（“请输入行！”）；
}否则如果（\u tblCols==“”）{
警告（“请输入列！”）；
}否则{
tblElm=document.createElement（'table'）；
对于（变量i=0；i<\u tblRows；i++）{
rowElm=document.createElement（'tr'）；
对于（var j=0；j<\u tblCols；j++）{
设_randNmbr=Math.floor（Math.random（）*100）+1；
randnmbrary.push（_randNmbr）；
colElm=document.createElement（'td'）；
colElm.appendChild（document.createTextNode（_randNmbr））；
罗厄姆·阿佩奇尔德（科尔姆）；
}
tblElm.appendChild（rowElm）；
}
_tblDiv.innerHTML=“”；
_tblDiv.追加（tblElm）；
_randNmbrAvg=获取平均值（randNmbrArray）；
avgElm.innerHTML=“”；
append（`表中数字的平均值为${u randNmbrAvg.toFixed（2）}`）；
}
}
函数GetAverage（numberArray）{
设total=0；
对于（变量i=0；i

表格{
边界塌陷：塌陷；
保证金：自动25px自动25px；
}
表，td，th{
边框：1px实心#70AEC5；
}
运输署{
填充：3倍；
}
th{
边框：1px纯白；
背景色：#70AEC5；
颜色：白色；
文本对齐：居中；
填充：4px0 4px0；
}
tr：悬停{
背景：#ddd
}
h1{
颜色：#70AEC5；
}
#方向{
边界半径：25px；
边框：2px实心#70AEC5；
填充：10px；
利润率：10px25px15px25px；
}
钮扣{
背景色：#4CAF50；
/*绿色的*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润率：4px20px；
光标：指针；
边界半径：8px；
}
.三角形{
背景色：#ffcccc；
}

生成表
张育空
行：列：
生成

我的解决方案使用将图表两半平分的直线斜率，然后根据该斜率增加要着色的单元格数

var斜率=\u tblCols/\u tblRows

演示：

//事件处理程序函数
函数打印_表（）{
让我们来看看，我的名字是什么；
_tblRows=document.getElementById（'rows'）.value；
_tblCols=document.getElementById（'cols'）.value；
randNmbrArray=[]；
_tblDiv=document.getElementById（'my_table'）
avgElm=document.getElementById（'average'）；
如果（\u tblRows==“”）{
警告（“请输入行！”）；
} 
否则如果（\u tblCols==“”）{
警告（“请输入列！”）；
}
否则{
tblElm=document.createElement（'table'）；
var coloredCells=1
var slope=\u tblCols/\u tblRows//获取斜率
对于（变量i=0；i<\u tblRows；i++）{
rowElm=document.createElement（'tr'）；
对于（var j=0；j<\u tblCols；j++）{
设_randNmbr=Math.floor（Math.random（）*100）+1；
randnmbrary.push（_randNmbr）；
colElm=document.createElement（'td'）；
if（j<彩色单元格）{
colElm.classList.add（“三角形”）
}
colElm.appendChild（document.createTextNode（_randNmbr））；
罗厄姆·阿佩奇尔德（科尔姆）；
}
coloredCells+=斜率；//斜率增量
tblElm.appendChild（rowElm）；
}
_tblDiv.innerHTML=“”；
_tblDiv.追加（tblElm）；
_randNmbrAvg=获取平均值（randNmbrArray）；
avgElm.innerHTML=“”；
append（`表中数字的平均值为${u randNmbrAvg.toFixed（2）}`）；
}
}
函数GetAverage（numberArray）{
设total=0；
对于（变量i=0；i

表格{
边界塌陷：塌陷；
保证金：自动25px自动25px；
}
表，td，th{
边框：1px实心#70AEC5；
}
运输署
{
填充：3倍；
}
th{
边框：1px纯白；
背景色：#70AEC5；
颜色：白色；
文本对齐：居中；
填充：4px0 4px0；
}
tr：悬停{背景：#ddd}
h1{
颜色：#70AEC5；
}
#方向{
边界半径：25px；
边框：2px实心#70AEC5；
填充：10px；
利润率：10px25px15px25px；
}
钮扣{
背景色：#4CAF50；/*绿色*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润率：4px20px；
光标：指针；
边界半径：8px；
}
.三角形
{
背景色：#ffcccc；
}

生成表
张育空
排：
柱：
生成

基本上，您必须比较单元格的

x

和

y

坐标。对于正方形矩阵，单元格左下角的三角形符合条件

x您提供的屏幕截图有多精确？屏幕截图实际上是我想要完成的结果，除了着色部分，其他都是完整的。我刚才尝试了一个解决方案，我以前使用过，但没有得到相同的结果（有些单元格不匹配）. 我认为我的解决方案是有效的。你有兴趣看吗？当然有！是的
if(j / (_tblCols - 1) <= i / (_tblRows - 1)) {
    colElm.className = "triangle";
}