Javascript-форум - Закрашивание ячеек в таблице в зависимости от данных в ячейк

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Закрашивание ячеек в таблице в зависимости от данных в ячейк (https://javascript.ru/forum/dom-window/23342-zakrashivanie-yacheek-v-tablice-v-zavisimosti-ot-dannykh-v-yachejjk.html)

Сильно сложно , у меня не получиться ?

Цитата:

Сообщение от Sergey and

Сильно сложно , у меня не получиться ?

про вас не знаю :) дерзайте!

Буду пробовать, опыта мало в этом деле Не знаю какой объект брать div table...

Sergey and,

Цитата:

Сообщение от Sergey and

сли у кого были магнитофоны не с круглой регулировкой а с бегуном?, бегунок хочу сделать.

Мне кажется, вы смешиваете в одну кучу индикатор и регулятор.
Насчет регуляторов смотрите слайдеры.

индикатор с регулятором

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
<style>
  td { position:relative;
        width:20px;
        height:150px;
        padding: 0px;     
 }
  .back {position:absolute;
         left:0px;
         bottom:0px;
         width:100%;
         background-color:red;
         z-index:-1;
  }
  .slider { margin: 5px; height: 150px; }

</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
    $(function () {
        $(".slider").slider({
            orientation: "vertical",
            min: 0,
            max: 100,
            step: 10,
            value: 50

        });
         var rows = $('tr'),
          lights = rows.find('.back'),
          slides = rows.find('.slider'),
          currHeight;

        function loop() {
            for (var i = 0; i < lights.length; i++) {
                currHeight = Math.random() * $(slides[i]).slider('values',0);
                 $(lights[i]).css('height', currHeight + "%");
            }
            setTimeout(loop, 200);
        }
        loop();
    })
</script>
</head>
<body>

<table border="1px">
  <tr>
    <td><div class="back"></div></td>
    <td><div class="back"></div></td>
    <td><div class="back"></div></td>
    <td><div class="back"></div></td>
    <td><div class="back"></div></td>
  </tr>
   <tr>
    <td><div class="slider"></div></td>
    <td><div class="slider"></div></td>
    <td><div class="slider"></div></td>
    <td><div class="slider"></div></td>
    <td><div class="slider"></div></td>
  </tr>
</table>
</body>
</html>

Благодарю. :thanks: :thanks:

У меня тоже немного схожий вопрос...
А как сделать так, чтоб закрашивались только те ячейки таблицы, которые заполнены, а пустые ячейки таблицы не закрашивались?

<table border="1" id="row">
  <tr>
    <td width="20" height="20"></td>
    <td width="20" height="20"></td>
    <td width="20" height="20">2</td>
    <td width="20" height="20"></td>
</tr>
</table>
<script>
arr= document.getElementById("row").getElementsByTagName("td");
colors= "red";
window.onload = function () {
	for (var i=0; i!= arr.length; ++i) {
		if (typeof arr[i] !== "") {
			arr[i].style.background=colors;
		}	
	}
}

</script>

<table border="1" id="row">
  <tr>
    <td width="20" height="20"></td>
    <td width="20" height="20"></td>
    <td width="20" height="20">2</td>
    <td width="20" height="20"></td>
</tr>
</table>
<script>
window.onload = function () {
   arr= document.getElementById("row").getElementsByTagName("td");
   colors= "red";

	for (var i=0; i!= arr.length; ++i) {
		if (typeof arr[i] !== "" && arr[i].innerHTML != "") {
			arr[i].style.background=colors;
		}	
	}
}

</script>

Пупел,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td:empty{
      background-color: #FFFFFF;
  }
  td{
      background-color: #FF0000;
  }

  </style>
</head>

<body>
<table border="1" id="row">
  <tr>
    <td width="20" height="20"></td>
    <td width="20" height="20"></td>
    <td width="20" height="20">2</td>
    <td width="20" height="20"></td>
</tr>
</table>

</body>
</html>

Спасибо! Вопрос исчерпан)