Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2012, 22:37
Новичок на форуме
Отправить личное сообщение для Space-06 Посмотреть профиль Найти все сообщения от Space-06
 
Регистрация: 18.12.2011
Сообщений: 8

Изменение окраски строк таблицы, исходя из данных?
Доброго времени суток уважаемые форумчане!

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

Пример: Таблица строится скриптом:
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);


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

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

подскажите пожалуйста - как возможно этот вопрос реализовать?
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2012, 09:27
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,234

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

А цвет строки можно задать, задав DOM-объекту строки нужный класс, например(свойство className), либо задав необходимый список CSS-свойств через свойство style
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2012, 14:57
Новичок на форуме
Отправить личное сообщение для Space-06 Посмотреть профиль Найти все сообщения от Space-06
 
Регистрация: 18.12.2011
Сообщений: 8

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

не могли бы на примере это показать?
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2012, 15:40
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,234

Цитата:
Здравствуйте!

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

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

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

Задавайте конкретные вопросы по ходу дела.
Конкретно по вашему вопросу, вам стоит акцентировать внимание на серии статей http://javascript.ru/tutorial/dom.
После их прочтения и освоения вы должны с легкостью реализовать мой предыдущий ответ самостоятельно
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2012, 20:32
Новичок на форуме
Отправить личное сообщение для Space-06 Посмотреть профиль Найти все сообщения от Space-06
 
Регистрация: 18.12.2011
Сообщений: 8

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 13:30
Перемещение строк таблицы в Firefox barcelona jQuery 17 23.02.2009 15:41
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 01:28