为 table 的 innerHTML 设置条件

Question

我有一个 Table，这个 table 是使用这个 HTML 文件从 excel 文件导入的：

<!DOCTYPE html>
<html>
<head>
    <title>XLSX to HTML</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <script src='http://alasql.org/console/xlsx.core.min.js'></script>
    <script src='http://alasql.org/console/alasql.min.js'></script>
</head>
<body>
    <script>
        alasql('select * into html("#here",{headers:true}) \
          from xlsx("data/data.xlsx",\
                    {headers:true})');
    </script>
    <div id="here"></div>
</body>
</html>

我的 excel 文件包含 4 列和 23 行。第 4 列的值等于从第 3 列减去第 2 列。
现在我想为第 4 列设置条件。如果值大于 0（零），则将与该 td 相关的特定框颜色设置为绿色，如果值等于 0，则将其设置为黄色，如果其小于 0（负值），则将颜色设置为红色。
如果你能帮助解决这个问题，我将不胜感激。我只知道 HTML + CSS 基础。

Answer 1

您可以自己修改代码并生成 HTML table，而无需使用 Alasql 的 INTO HTML() 函数。请参阅以下示例：

// First: read data from XLSX file into "res" variable
alasql('select * from xlsx("data/data.xlsx", {headers:true})',function(res){
    // Start to create HTML text 
    var s = '<table><thead><th>Col1<th>Col2<tbody>'; // Generate table header
    for(var i=0;i<res.len;i++) {
        s += '<tr>';
        s += '<td>'+res[i].Col1;    // Cell for first column
        s += '<td ';
        // Now add colored cell for second column
        if(res[i].Col2>0) s += 'style="background-color:yellow"';
        else s += 'style="background-color:red"';
        s += '>'+res[i].Col2;
    }
    s += '</table>';
});
document.getElementById('res').innerHTML = s;

请参阅下面的工作代码段，其中包含着色 table 个单元格的概念。

免责声明：我是 Alasql 的作者。

   var res = [{a:1,b:1},{a:2,b:-1}];
   var s = '<table><thead><th>Col1<th>Col2<tbody>';
        for(var i=0;i<res.length;i++) {
            s += '<tr>';
            s += '<td>'+res[i].a;
            s += '<td ';
            if(res[i].b>0) s += 'style="background-color:yellow"';
            else s += 'style="background-color:red"';
            s += '>'+res[i].b;
        }
        s += '</table>';

    document.getElementById('res').innerHTML = s;

<div id="res"></div>

为 table 的 innerHTML 设置条件

Set condition for innerHTML of a table

javascript

excel