为表的innerHTML设置条件
我有一个表，这个表是从一个Excel文件导入使用这个HTML文件：
<!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行。 第四列的值等于从第三列减去第二列。
现在我想为第四列设置一个条件。 如果值大于0（零），则将与该td相关的特定框颜色设置为绿色，如果值等于0，则将其设置为黄色;如果值小于0（负值），则将该颜色设置为红色。
如果您能帮助解决这个问题，我将不胜感激。 我只知道HTML + CSS基础知识。
您可以自己修改代码并生成HTML表，而无需使用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;
请参阅下面的工作代码片段，并着色表格单元的概念。
免责声明：我是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>