Как: условно отформатировать <td>, сгенерированный с помощью запроса MySQL, на основе содержимого и с использованием PHP / JavaScript - PullRequest
Новая
       10

Как: условно отформатировать <td>, сгенерированный с помощью запроса MySQL, на основе содержимого и с использованием PHP / JavaScript

1 голос
/ 18 июля 2011

У меня есть таблица базы данных, которая содержит: 

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";

Я создал файл JavaScript с именем highlight.js, который содержит: 

$(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> и вызвать JavaScript из 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);
}

Ответы [ 3 ]

5 голосов
/ 18 июля 2011

Почему бы вам просто не использовать css?

Добавьте значение к атрибуту class на td, затем установите правила в 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 без исправления синтаксиса)

3 голосов
/ 18 июля 2011

Проблема в том, что highlight.js запускается слишком рано. Он запускается немедленно, покорно ищет все совпадающие элементы и раскрашивает их, но, увы, асинхронный запрос еще не вставил сопоставляемый контент.

Это может показаться мгновенным, но на самом деле (я считаю) у вас есть проблема порядка операций.

Таким образом, чтобы решить эту проблему, вам нужно запустить код раскраски после того, как запрашиваемый контент был введен на страницу. Это может произойти как часть вызова $.ajax или $.load (не указан в описании проблемы), который вы используете для ввода содержимого query.php.

Надеюсь, это поможет!

1 голос
/ 18 июля 2011

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');
    }
}
...