如何：根据内容并使用 PHP/JavaScript 有条件地格式化通过 MySQL 查询生成的

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 包含：

。到目前为止，一切都很好。现在是棘手的部分。我想根据内容有条件地格式化 的背景，这样如果它包含“A”，则 background-color:red;。 的生成方式如下：

// 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< 调用它/code> using:

// Load higlighting syntax

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

但没有任何反应。我尝试提供

标签和 id 并从 index.php 调用 JavaScript（因为它具有 HTML 和 < /code> 标签），但这也不起作用。

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

附加信息。 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='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 类名。

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

Answer 2

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

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

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

希望这有帮助！

Answer 3

jimbojw 向您解释了为什么您的代码不起作用，您需要在更新表格后调用highlight.js中的代码。他认为您在 AJAX 部分中使用了 jQuery，但您没有。因此，您有两个选择，更改代码以使用 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');
    }
}