如何根据其值突出显示表格中的单元格答案

【问题标题】：How to highlight cell in the table according to its value如何根据其值突出显示表格中的单元格
【发布时间】：2021-08-29 11:30:13
【问题描述】：

我有一个来自 sql 表的数据

我想使用 java 让它像这样将高价值单元格突出显示为 html

我创建了一个表格来放入数据，但无法获取每个单元格的值

                temphtml +="                    <tr>                                                                        \n";
                temphtml +="            <td> </td>              \n";
                temphtml +="            <td>0</td>              \n";    
                temphtml +="            <td>1</td>              \n";                                                                                     
                temphtml +="            <td>2 </td>             \n";                                                                                     
                temphtml +="            <td>3</td>              \n";                                                                                    
                temphtml +="            <td>4</td>              \n";                                                                                    
                temphtml +="            <td>5</td>              \n";                                                                                       
                temphtml +="            <td>6</td>              \n";                                                                                  
                temphtml +="            <td>7</td>              \n";                                                                                         
                temphtml +="            <td>8</td>              \n";                                                                                         
                temphtml +="            <td>9</td>              \n";                                                                                         
                temphtml +="            <td>10</td>             \n";                                                                                          
                temphtml +="            <td>11</td>             \n";                                                                                          
                temphtml +="            <td>12</td>             \n";                                                                                          
                temphtml +="            <td>13</td>             \n";                                                                                          
                temphtml +="            <td>14</td>             \n";
                temphtml +="            <td>15</td>             \n";
                temphtml +="        </tr>                                                             \n";
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td >A</td>              \n";
                temphtml +="            <td id = 'A0'></td>             \n";        
                temphtml +="            <td id = 'A1'></td>             \n";                                                                                      
                temphtml +="            <td id = 'A2'> </td>            \n";                                                                                      
                temphtml +="            <td id = 'A3'></td>             \n";                                                                                     
                temphtml +="            <td id = 'A4'></td>             \n";                                                                                     
                temphtml +="            <td id = 'A5'></td>             \n";                                                                                        
                temphtml +="            <td id = 'A6'></td>             \n";                                                                                   
                temphtml +="            <td id = 'A7'></td>             \n";                                                                                          
                temphtml +="            <td id = 'A8'></td>             \n";                                                                                          
                temphtml +="            <td id = 'A9'></td>             \n";                                                                                          
                temphtml +="            <td id = 'A10'></td>            \n";                                                                                           
                temphtml +="            <td id = 'A11'></td>            \n";                                                                                           
                temphtml +="            <td id = 'A12'></td>            \n";                                                                                           
                temphtml +="            <td id = 'A13'></td>            \n";                                                                                           
                temphtml +="            <td id = 'A14'></td>            \n";
                temphtml +="            <td id = 'A15'></td>            \n";        
                temphtml +="        </tr>                                                             \n";                                                    
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td>B</td>              \n";
                temphtml +="            <td id = 'B0'></td>             \n";
                temphtml +="            <td id = 'B1'></td>             \n";                                                                                      
                temphtml +="            <td id = 'B2'></td>             \n";                                                                                     
                temphtml +="            <td id = 'B3'></td>             \n";                                                                                     
                temphtml +="            <td id = 'B4'></td>             \n";                                                                                     
                temphtml +="            <td id = 'B5'></td>             \n";                                                                                        
                temphtml +="            <td id = 'B6'></td>         \n";                                                                                       
                temphtml +="            <td id = 'B7'></td>         \n";                                                                                              
                temphtml +="            <td id = 'B8'></td>             \n";                                                                                          
                temphtml +="            <td id = 'B9'></td>             \n";                                                                                          
                temphtml +="            <td id = 'B10'></td>            \n";                                                                                           
                temphtml +="            <td id = 'B11'></td>            \n";                                                                                           
                temphtml +="            <td id = 'B12'></td>            \n";                                                                                           
                temphtml +="            <td id = 'B13'></td>            \n";                                                                                           
                temphtml +="            <td id = 'B14'></td>            \n";
                temphtml +="            <td id = 'B15'></td>            \n";                                                                                           
                temphtml +="        </tr>                                                             \n";
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td id = 'A0'>C</td>              \n";
                temphtml +="            <td id = 'A0'>C0</td>             \n";
                temphtml +="            <td id = 'A0'>C1</td>             \n";                                                                                      
                temphtml +="            <td id = 'A0'>C2</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>C3</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>C4</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>C5</td>             \n";                                                                                        
                temphtml +="            <td id = 'A0'>C6</td>             \n";                                                                                   
                temphtml +="            <td id = 'A0'>C7</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>C8</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>C9</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>C10</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>C11</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>C12</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>C13</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>C14</td>            \n";
                temphtml +="            <td id = 'A0'>C15</td>            \n";                                                                                           
                temphtml +="        </tr>                                                             \n";
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td id = 'A0'>D</td>              \n";
                temphtml +="            <td id = 'A0'>D0</td>             \n";
                temphtml +="            <td id = 'A0'>D1</td>             \n";                                                                                      
                temphtml +="            <td id = 'A0'>D2</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>D3</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>D4</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>D5</td>             \n";                                                                                        
                temphtml +="            <td id = 'A0'>D6</td>             \n";                                                                                   
                temphtml +="            <td id = 'A0'>D7</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>D8</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>D9</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>D10</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>D11</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>D12</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>D13</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>D14</td>            \n";
                temphtml +="            <td id = 'A0'>D15</td>            \n";                                                                                           
                temphtml +="        </tr>                                                             \n";
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td id = 'A0'>E</td>              \n";
                temphtml +="            <td id = 'A0'>E0</td>             \n";
                temphtml +="            <td id = 'A0'>E1</td>             \n";                                                                                      
                temphtml +="            <td id = 'A0'>E2</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>E3</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>E4</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>E5</td>             \n";                                                                                        
                temphtml +="            <td id = 'A0'>E6</td>             \n";                                                                                   
                temphtml +="            <td id = 'A0'>E7</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>E8</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>E9</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>E10</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>E11</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>E12</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>E13</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>E14</td>            \n";
                temphtml +="            <td id = 'A0'>E15</td>            \n";                                                                                           
                temphtml +="        </tr>                                                             \n";
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td id = 'A0'>F</td>              \n";
                temphtml +="            <td id = 'A0'>F0</td>             \n";
                temphtml +="            <td id = 'A0'>F1</td>             \n";                                                                                      
                temphtml +="            <td id = 'A0'>F2</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>F3</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>F4</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>F5</td>             \n";                                                                                        
                temphtml +="            <td id = 'A0'>F6</td>             \n";                                                                                   
                temphtml +="            <td id = 'A0'>F7</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>F8</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>F9</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>F10</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>F11</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>F12</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>F13</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>F14</td>            \n";
                temphtml +="            <td id = 'A0'>F15</td>            \n";                                                                                           
                temphtml +="        </tr>                                                             \n";
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td id = 'A0'>G</td>              \n";
                temphtml +="            <td id = 'A0'>G0</td>             \n";
                temphtml +="            <td id = 'A0'>G1</td>             \n";                                                                                      
                temphtml +="            <td id = 'A0'>G2</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>G3</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>G4</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>G5</td>             \n";                                                                                        
                temphtml +="            <td id = 'A0'>G6</td>             \n";                                                                                   
                temphtml +="            <td id = 'A0'>G7</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>G8</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>G9</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>G10</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>G11</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>G12</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>G13</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>G14</td>            \n";
                temphtml +="            <td id = 'A0'>G15</td>            \n";                                                                                           
                temphtml +="        </tr>                                                             \n";
                temphtml +="        <tr>                                                              \n";
                temphtml +="            <td id = 'A0'>H</td>              \n";
                temphtml +="            <td id = 'A0'>H0</td>             \n";
                temphtml +="            <td id = 'A0'>H1</td>             \n";                                                                                      
                temphtml +="            <td id = 'A0'>H2</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>H3</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>H4</td>             \n";                                                                                     
                temphtml +="            <td id = 'A0'>H5</td>             \n";                                                                                        
                temphtml +="            <td id = 'A0'>H6</td>             \n";                                                                                   
                temphtml +="            <td id = 'A0'>H7</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>H8</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>H9</td>             \n";                                                                                          
                temphtml +="            <td id = 'A0'>H10</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>H11</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>H12</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>H13</td>            \n";                                                                                           
                temphtml +="            <td id = 'A0'>H14</td>            \n";
                temphtml +="            <td id = 'A0'>H15</td>              \n";                                                                                                        
                  
                temphtml +="                    </tr>                                                        \n";

如何设置每个单元格的样式？

【问题讨论】：

在此处编辑问题。具有适当的编码风格。
id = 'A0' 只能使用一次，ID 是唯一的。您可以使用class = 'A0'，以便可以根据需要重复使用它。除了我不清楚您的问题之外，temphtml 与您添加的屏幕不匹配。你能澄清一下吗？
JAVA 还是 JAVASCRIPT ？
你能好好看看你展示的代码（我假设是Javascript），看看它产生了什么内容的表格。它与您给出的图像有一些相似之处，但不多。另外，数据库中的值在哪里放入表中，是否在后端某处（例如通过服务器上的 PHP）？
Java 与此有什么关系？

标签： javascript html css

【解决方案1】：

我认为您可以将您正在使用的 id 更改为 class = 'A0'，因此通过 Javascript 操作 HTML 值，您可以为单元格着色

var items =document.getElementsByClassName('A0');
for (var i = 0; i < items.length; i++) {
  if(items[i].innerHTML>0){
      items[i].setAttribute('style', 'color: #F00');
  }
}

所以这里发生的事情是它将获取包含class='A0' 的元素的所有值，并检查这些值是否大于0，如果是，它将为HTML 元素text-color 着色。如果要更改背景颜色，只需将color 替换为background-color

【讨论】：