如何：有条件地格式化 a，即通过 MySQL 查询生成，基于内容并使用 PHP/JavaScript

Question

我有一个数据库表，其中包含：

Industry risk
--------------
      A
      B
      C

等等。 我使用query.php生成一个动态表来index.php并使用 AJAX 自动刷新它。 数据是通过以下方式提取的：

$sql="SELECT * FROM scoreboard";

生成的表是：

// Construct the table

echo "<table id='querytable'>\n";

结果由query.js处理并显示在index.php中： <div id="querydiv"></div> 。 到目前为止，一切都很好。 现在是棘手的部分。 我想根据内容有条件地格式化<td>的背景，这样如果它包含“A”，那么background-color:red; . <td>是这样生成的：

// Construct the array

while($row = mysql_fetch_assoc($result)){
    echo '<tr>'."\n";
    echo "<td align='center'>{$row['codcliente']}</td>\n" . "<td align='center'>{$row['nombre']}</td>\n" . "<td align='center'>{$row['ejecutivo']}</td>\n" . "<td align='center'>{$row['banca_as400']}</td>\n" . "<td align='center'>{$row['banca_real']}</td>\n" . "<td align='right'>$&nbsp;".number_format($row['ingresos'], 2)."</td>\n" . "<td align='center'>{$row['ciiu']}</td>\n" . "<td align='center'>{$row['division']}</td>\n" . "<td align='center'>{$row['actividad']}</td>\n" . "<td align='center'>{$row['riesgo_industria']}</td>\n" . "<td align='center'>{$row['riesgo_cliente']}</td>\n" . "<td align='center'>{$row['fecha']}</td>\n" . "<td align='center'>{$row['analista']}</td>\n";
    echo '</tr>'."\n";
}
echo "</table>\n";

我制作了一个名为highlight.js的 JavaScript 文件，其中包含：

$(function() {
            $("#querytable td:contains('A')").css('background-color','#C0504D'),
            $("#querytable td:contains('B')").css('background-color','#FDE480'),
            $("#querytable td:contains('C')").css('background-color','#9BBB59');
            });

我尝试从query.php中调用它：

// Load higlighting syntax

echo "<script type='text/javascript' src='highlight.js'></script>";

但什么也没发生。 我试过给出<div>标签和 id 并从index.php （因为它有 HTML 和一个<head>标签），但也没有。

有没有办法做到这一点？ 我究竟做错了什么？ 谢谢！

附加信息。 query.js的内容：

// Customize these settings

var seconds = 2;
var divid = "querydiv";
var url = "query.php";

// Refreshing the DIV

function refreshdiv(){

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process

var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

Answer 1

为什么不直接使用 css？

将值添加到td上的class属性，然后在 css 中设置规则。

添加 class 像class='CONTENTS' ：

echo "<td align='center' class='{$row['codcliente']}'> ...

然后用样式表替换您的 jQuery 代码：

#querytable td.A {background-color : #C0504D; }
#querytable td.B {background-color : #FDE480; }
#querytable td.C {background-color : #9BBB59; }

在您的示例中，内容是简单有效的 css，如果内容有空格或以数字开头，您需要将它们转换为有效的 css class 名称。

（编辑，我将 js 代码复制到我的 css 中，但没有修复语法）

Answer 2

问题是 highlight.js 运行得太早了。 它立即运行，尽职尽责地寻找所有匹配的元素并为它们着色，但是，异步查询还没有插入要匹配的内容。

它可能看起来是瞬时的，但实际上（我相信）你有一个操作顺序问题。

所以要解决这个问题，需要在查询的内容注入页面后运行着色代码。 这将作为您用于引入 query.php 内容的$.ajax或$.load .load 调用（未在问题描述中指定）的一部分发生。

希望这可以帮助！

Answer 3

jimbojw 向您解释了为什么您的代码不起作用，您需要在更新表格后调用highlight.js中的代码。 他以为您将 jQuery 用于 AJAX 零件，但您没有。 因此，您有两个选择，将代码更改为使用 jQuery AJAX 函数或从 xmlHttp.onreadystatechange 内部调用突出显示代码

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById(divid).innerHTML=xmlHttp.responseText;
        setTimeout('refreshdiv()',seconds*1000);

        // call the code after updating the DOM tree
        $("#querytable td:contains('A')").css('background-color','#C0504D'),
        $("#querytable td:contains('B')").css('background-color','#FDE480'),
        $("#querytable td:contains('C')").css('background-color','#9BBB59');
    }
}

如何：有条件地格式化 a，即通过 MySQL 查询生成，基于内容并使用 PHP/JavaScript

问题描述

3 个解决方案

解决方案1
5 已采纳 2011-07-18 17:15:18

解决方案2
3 2011-07-18 17:07:37

解决方案3
1 2011-07-18 17:51:06

如何：有条件地格式化 a，即通过 MySQL 查询生成，基于内容并使用 PHP/JavaScript

问题描述

3 个解决方案

解决方案1 5 已采纳 2011-07-18 17:15:18

解决方案2 3 2011-07-18 17:07:37

解决方案3 1 2011-07-18 17:51:06

解决方案1
5 已采纳 2011-07-18 17:15:18

解决方案2
3 2011-07-18 17:07:37

解决方案3
1 2011-07-18 17:51:06