Форум

Space-06 · #1 (**permalink**) 12.02.2012, 23:37

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

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

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

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

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

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

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

Gvozd · #2 (**permalink**) 13.02.2012, 10:27

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

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

Space-06 · #3 (**permalink**) 13.02.2012, 15:57

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

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

Gvozd · #4 (**permalink**) 13.02.2012, 16:40

Цитата:

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

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

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

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

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

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

Space-06 · #5 (**permalink**) 14.02.2012, 21:32

у меня уже готовое 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 объект - класс или стиль чтоб закрасить.

Форум

Справочник

Discord чат

Курсы javascript