SamadhanGaikwad Ответов: 1

Мигайте фоном ячеек td в строке, если значение больше 20%

У меня есть ниже код, где весь tr bgcolor мигает, но я хочу мигать фоновым цветом элемента td в строке, если он содержит значение больше 20%. Любая помощь, пожалуйста.

<table border="2 px">
<tr>
  <td id="x" >2%</td>
  <td>30%</td>
  <td>322%</td>
</tr>
<tr class="invalid">
  <td >10%</td>
  <td>322%</td>
  <td>32%</td>
</tr>
</table>


Язык JavaScript:
var test = document.getElementById ( "x" ).innerText;
if test > 10 {
document.getElementById("x").style.backgroundColor='red';
}



Один ТР со стола:
<tr>
	<td style=""><?php echo $array1[array_keys($array1)[3]];?></td>
	<td style="	"><?php echo $array_step1[array_keys($array_step1)[3]];?></td>
	<td <?php echo "style='background-color:{$color3};' "; ?>><?php echo $change[array_keys($change)[3]];?>%</td>
	<td style=""><?php echo $array_step2[array_keys($array_step2)[3]];?></td>	
	<td <?php echo "style='background-color:{$color7};' "; ?>><?php echo $change1[array_keys($change1)[3]];?>%</td>
</tr>



Что я уже пробовал:

Попробовал с помощью небольшого javascript изменить цвет фона.

Я создал 
jsfiddle
.

1 Ответов

Рейтинг:
9

Karthik_Mahalingam

пробовать

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
</head>
<body>

    <table id="tbl" border="1">
        <tr>
            <td id="x">2%</td>
            <td>30%</td>
            <td>322%</td>
        </tr>
        <tr class="invalid">
            <td>10%</td>
            <td>322%</td>
            <td>32%</td>
        </tr>
    </table>

    <script>
        var rows = document.querySelectorAll('#tbl tr');
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var cells = row.getElementsByTagName('td');
            for (var j = 0; j < cells.length; j++) {
                var cell = cells[j];
                var value = parseFloat(cell.innerText.trim())
                if(value >20)
                    cell.style.backgroundColor= 'red'
            }
        }

    </script>
    

</body>
</html>

SamadhanGaikwad

Спасибо Karthik, но не могли бы вы обновить ответ на blink/flash cells вместо просто статического bgcolor, так как это моя конечная цель.

Karthik_Mahalingam 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <style>
       .blinkOn {
           background-color:red;
       }
   </style>
</head>
<body>

    <table id="tbl" border="1">
        <tr>
            <td id="x">2%</td>
            <td>30%</td>
            <td>322%</td>
        </tr>
        <tr class="invalid">
            <td>10%</td>
            <td>322%</td>
            <td>32%</td>
        </tr>
    </table>

    <script>
        var rows = document.querySelectorAll('#tbl tr');
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var cells = row.getElementsByTagName('td');
            for (var j = 0; j < cells.length; j++) {
                var cell = cells[j];
                var value = parseFloat(cell.innerText.trim())
                if (value > 20) { 
                    cell.className = 'blink'
                     
                }
            }
            setInterval(function () {
                if ($('.blink').length > 0) {
                   
                    if ($('.blink').hasClass('blinkOn'))
                        setTimeout(function() {  $('.blink').removeClass('blinkOn') , 100})
                    else
                        setTimeout(function () { $('.blink').addClass('blinkOn'), 100 })
                        
                }
                 
            }, 1000);
        }

        

    </script>
    

</body>
</html>

SamadhanGaikwad

Еще раз спасибо, только что добавил код на мою главную страницу, но он там не работает. Очень жаль, что теперь вы знаете, что я извлекаю данные и вычисляю их из базы данных Mysql. Пожалуйста, найдите обновленный код выше. Раствор также не работал при снятии условно нанесенного цвета. Так что я думаю,это должно быть связано со значениями PHP echo. Кроме того, я просто хотел применить код к последней/одной из строк, а не ко всем строкам в таблице.

SamadhanGaikwad

После долгого копания в коде, а также с помощью метода change and see он работает хорошо. Но так как мне пришлось удалить `<?php echo "style='background-color:{$color3};' "; ?>` из последней строки, то если условие (т. е. значение > 20%) не выполнено , то для последней строки должен быть зеленый цвет(значение < 0%), желтый цвет(значение от 1% до 19%). А во-вторых, я попробовал изменить интервал времени, чтобы он соответствовал тому, что работает в скрипке. Пожалуйста, не могли бы вы помочь мне решить эти 2 вопроса?

Karthik_Mahalingam

извините, я не знаю php

SamadhanGaikwad

Как и выше, код также работает нормально, хотя есть значение php. Если бы вы могли добавить условие if или else, чтобы увидеть, если какое-либо значение TD больше 20% в строке, примените выше кодовую логику else apply bgcolor red green or yellow, это было бы здорово.