Javascript-форум - Изменение окраски строк таблицы, исходя из данных?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Изменение окраски строк таблицы, исходя из данных? (https://javascript.ru/forum/events/25695-izmenenie-okraski-strok-tablicy-iskhodya-iz-dannykh.html)

Изменение окраски строк таблицы, исходя из данных?

Доброго времени суток уважаемые форумчане!

подскажите пожалуйста - каким образом возможно реализовать раскраску строк таблицы исходя основываясь на данных с помощью которых она построена.

Пример: Таблица строится скриптом:

var tbody = document.getElementById
    (id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode(oRS.Fields(0).value))
    var td2 = document.createElement("TD")
    td2.appendChild(document.createTextNode(oRS.Fields(1).value + " " + oRS.Fields(2).value + " " +  oRS.Fields(3).value))
    var td3 = document.createElement("TD")
    td3.appendChild(document.createTextNode(oRS.Fields(8).value))
    var td4 = document.createElement("TD")
    td4.appendChild(document.createTextNode(oRS.Fields(5).value))
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    tbody.appendChild(row);

а как раскрасить ее основываясь на данных которых нет в таблице, но они есть в базе данных? Т.е. если поле в Базе данных заполнено - то в таблице строка зеленая, если другое поле заполнено - оно красное, если не заполнены оба - то строка просто белая или без цвета

Поля которые необходимо проверять - не включены в построение таблицы которую имеем перед собой.

подскажите пожалуйста - как возможно этот вопрос реализовать?

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

А цвет строки можно задать, задав DOM-объекту строки нужный класс, например(свойство className), либо задав необходимый список CSS-свойств через свойство style

а как на примере это реализовать? я не совсем сильно силен в JS

не могли бы на примере это показать?

Цитата:

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Конкретно по вашему вопросу, вам стоит акцентировать внимание на серии статей http://javascript.ru/tutorial/dom.
После их прочтения и освоения вы должны с легкостью реализовать мой предыдущий ответ самостоятельно

у меня уже готовое HTA приложение:

Код:

<html>

    <head>

        

                <script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script>

                <link href="css\styles.css" rel="stylesheet" type="text/css" />

                

        <title>Служба  Контроля Предприятия</title>

        <hta:application

            id = "oHTA"

            ApplicationName = "MyTestApplication"

            Border = "Dialog"

            BorderStyle = "Complex"

            InnerBorder = "No"

            MaximizeButton = "No"

            MinimizeButton = "No"

            Scroll = "Yes"

            Selection = "No"

            ShowInTaskBar = "No"

            SingleInstance = "Yes"

            Version = "1.3"

        />



    </head>

    <body>

<script language="Javascript">

$(document).ready(init);



function init(){

    $('#report').hide();

}

</script>    

        

 <SCRIPT LANGUAGE="JavaScript">

function addRow(id){



var sConnString="data;" 

var oConn = new ActiveXObject("ADODB.Connection");

  oConn.Open(sConnString);

  var oRS = new ActiveXObject("ADODB.Recordset");

  oRS.Open("select  * from data order by FAM",oConn);

var data= new Array();

oRS.MoveFirst;

while (!oRS.EOF)

            {

    var tbody = document.getElementById

    (id).getElementsByTagName("TBODY")[0];

    var row = document.createElement("TR")

    var td1 = document.createElement("TD")

    td1.appendChild(document.createTextNode(oRS.Fields(0).value))

    var td2 = document.createElement("TD")

    td2.appendChild(document.createTextNode(oRS.Fields(1).value + " " + _

 oRS.Fields(2).value + " " +  oRS.Fields(3).value))

    var td3 = document.createElement("TD")

    td3.appendChild(document.createTextNode(oRS.Fields(8).value))

    var td4 = document.createElement("TD")

    td4.appendChild(document.createTextNode(oRS.Fields(5).value))

    row.appendChild(td1);

    row.appendChild(td2);

    row.appendChild(td3);

    row.appendChild(td4);

    tbody.appendChild(row);                

                

oRS.MoveNext

            }



oRS.close;



}





  

</script>

<div id=table>

<a href="#" onclick="addRow('myTable');return false;">Заполнить таблицу из Базы данных</a>

<center>

<h1>Ведение статистических данных</h1>

<p>Заполнение данных о работниках в базу данных</p>





<table id="myTable" cellspacing="0" border="1">

<thead>

      <th>№</th>

      <th>Ф. И. О.</th>

      <th>Дата приема на работу</th>

      <th>Занимаемая должность</th>





</thead>

  <tbody>



  </tbody>

</table> 

</center>

</div>

<div id=report>

<left>

<a href="#" onclick="unbox();return false;">Вернуться к списку</a>

<br>

<br>

<table width="900" cellpadding="0" cellspacing="2" border="0">

<tr>

<td width = "60px">Ф.И.О</td>

<td width = "840px"></td>

</tr>

<tr>

<td>Занимаемая должность</td>

<td></td>

</tr>

<tr>

<td>Образование</td>

<td></td>

</tr>

<tr>

<td>Место Образования</td>

<td></td>

</tr>

<tr>

<td>Дата приема на работу</td>

<td></td>

</tr>

<tr>

<td>Дополнительная Информация о работнике</td>

<td></td>

</tr>

</table>

</div>      

 <SCRIPT LANGUAGE="JavaScript">

 function box()

        {

$('#table').hide();

$('#report').show();

        }

        function unbox()

        {

        $('#report').hide();

$('#table').show();

        }

 

 

 

                document.getElementById("myTable").onclick = function (event) {

                        event = event || window.event;

                        var target = event.target || event.srcElement;

                        if (target.tagName == "TD"&&target.cellIndex == 0) {

                                a=target.innerHTML

                                //alert(a);

                                box();

                        }

                }

 </script>



    </body>

</html>

В моем примере замечательно строится таблица с помощью JS - и рекодсета. Я просто спросил как можно в уже построенной таблице, обработав ее или на момент построения ее раскрашивать

построение идет тут:

var tbody = document.getElementById
    (id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode(oRS.Fields(0).value))
    var td2 = document.createElement("TD")
    td2.appendChild(document.createTextNode(oRS.Fields(1).value + " " + oRS.Fields(2).value + " " +  oRS.Fields(3).value))
    var td3 = document.createElement("TD")
    td3.appendChild(document.createTextNode(oRS.Fields(8).value))
    var td4 = document.createElement("TD")
    td4.appendChild(document.createTextNode(oRS.Fields(5).value))
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    tbody.appendChild(row);

Как грамотно и правильно вставить DOM объект - класс или стиль чтоб закрасить.