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

[da_ff]

trikadin,
Кстати, а как делать эти запускаемые примеры?

[trikadin]

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting

[Sergey and]

Здравствуйте
Помогите пожалуйста мне нужно сделать что то типа прогрессбара из колонки таблицы. я в программирование новичок,сильно не пинайте. Задача закрашивать колонку в красный если 100% или если 50% то половина красная а половина прозрачная.

[Dilettante_Pro]

Sergey and,

<style>
  td { position:relative;
        width:40px;
        padding: 0px;     
 }
  td div.back {position:absolute;
         left:0px;
         top:0px;
         height:100%;
         background-color:red;
         z-index:-1;
  }

</style>
<table border="1px">
  <tr>
    <td><div class="back"></div>0%</td>
    <td><div class="back"></div>25%</td>
    <td><div class="back"> </div>50%</td>
    <td><div class="back"></div>75%</td>
    <td><div class="back"></div>100%</td>
  </tr>
</table>
<script>
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length;i++) {
     arr[i].firstChild.style.width = arr[i].innerText;
  }
</script>

[рони]

Dilettante_Pro,

закрашивать колонку

[Dilettante_Pro]

рони,
Я вообще с большим трудом понял задачу.
Если колонка - то 100% это что и от чего?

[рони]

Dilettante_Pro,
ждём подробности

[Dilettante_Pro]

Что-то примерно так?

<style>
  td { position:relative;
        width:20px;
    
 }

</style>
Процент<input type='text'/>
<table >
  <tr>
    <td>0%</td>
  </tr>
   <tr>
    <td>25% </td>
  </tr>
   <tr>
    <td>50% </td>
  </tr>
  <tr>
    <td>75% </td>
  </tr>
  <tr>
    <td>100% </td>
  </tr>
</table>
<script>
document.querySelector('input').onchange = function() {
  var percent = +this.value;
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length ;i++) {
     arr[i].style.backgroundColor = "white";
  }
  for(var i = 0;i < ((arr.length * percent) / 100) ;i++) {
     arr[i].style.backgroundColor = "red";
  }
}
</script>

[Dilettante_Pro]

вариант оформления. ТС, ау!!!

<style>
  td { position:relative;
        width:20px;
        height:30px;
        padding: 0px;
  }
  td div.back {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
  }
</style>
Процент<input type='text'/>
<table>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
</table>
<script>
document.querySelector('input').onchange = function() {
  var percent = +this.value;
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length ;i++) {
     arr[i].firstChild.style.backgroundColor = "white";
  }
  for(var i = 0;i < ((arr.length * (percent - 5)) / 100) ;i++) {
     arr[i].firstChild.style.backgroundColor = "red";
  }
}
</script>

[Sergey and]

Спасибо за ответы и код.
Похоже как в 14 топике. Представляю так , но как сделать не знаю( таблица а в ней колонки. Размер колонки 10 х 100(для примера). Если в функцию приходит 1% то красным закрашен один ряд пикселей из 100 в колонке красным, если приходит 25% то закрашено 25 строк из 100. Вообщем вертикальный progressbar.

Пока писал ответ уже ответили, уже почти. Для 100% много строк <td><div class="back"></div></td> сто штук придется писать. Хотелось бы одну <td></td> закрашивать в зависимости от%