我有一个数据库表,其中包含:
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'>$ ".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
调用JavaScript(因为它有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);
}
为什么不直接使用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中而没有修复语法)
问题是highlight.js运行得太早。它立即运行,尽职尽责地查找所有匹配的元素并为它们着色,但是,唉,异步查询还没有插入要匹配的内容。
它可能看起来是瞬时的,但实际上(我相信)你有一个操作顺序问题。
因此,要解决这个问题,需要在查询的内容被注入页面后运行着色代码。这将作为$.ajax
或$.load
调用(未在问题描述中指定)的一部分发生,用于引入query.php内容。
希望这对你有帮助!
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');
}
}