Форум

Neo54213 · #1 (**permalink**) 03.07.2017, 23:57

Нужно проверить чтобы все ячейки таблицы имели один и тот же цвет.
Как получить свойство ксс я знаю, а вот как выбрать каждый элемент и сравнить его с цветом, например, первой ячейки первой строки я не знаю. В js я просто брал и массивом перегонял. А здесь как?

рони · #2 (**permalink**) 04.07.2017, 00:20

Neo54213,
http://api.jquery.com/each/

j0hnik · #3 (**permalink**) 04.07.2017, 00:33

<html>
<head>
</head>
<body>
<table>
	<tr><td style='background-color:red;'>rerer</td><td style='background-color:red;'>rerer</td></tr>
	<tr><td style='background-color:red;'>rerer</td><td style='background-color:red;'>rerer</td></tr>
	<tr><td>rerer</td><td style='background-color:red;'>rerer</td></tr>
</table>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>

	$("table td").each(function(i){
 	if($(this).css("background-color") !== $("table td").eq(1).css("background-color")) alert('элемент'+i+' другого цвета');
	});

	</script>
</body>
</html>

Neo54213 · #4 (**permalink**) 04.07.2017, 00:53

Спасибо за ответы. На всякий случай размещу как у меня получилось

var flag = 1;
    $('#array td').each(function(){
        var p = 0;
        if($(this).css('background-color') != $('#array td:first').css('backgroundColor')){
            flag = 0;
        }
    });
    if(flag == 1) {
        $('#array td').css('background-color', 'white');
    }

j0hnik · #5 (**permalink**) 04.07.2017, 01:12

не обязательно заново красить всю таблицу, можно закрасить тот элемент который другого цвета.

$('#array td').each(function(){
        var p = 0;
        if($(this).css('background-color') != $('#array td:first').css('backgroundColor')){
            $(this).css('background-color', 'white');
        }
    });

рони · #6 (**permalink**) 04.07.2017, 01:35

j0hnik,
алгоритм такой: если все ячейки одного цвета, сделать их белого цвета.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var h = $("h2");
    $("table").each(function(indx, table) {
        var arr = $("td", table).get(),
            color = $(arr[0]).css("backgroundColor"),
            flag = arr.every(function(el) {
            return $(el).css("backgroundColor") == color
        });
        flag && $(arr).css({
            "background-color": "white"
        });
        h.eq(indx).text(flag ? "ready" : "wait")
    })
});
  </script>
</head>

<body>
<h2></h2>
<table>
  <tr><td style='background-color:red;'>rerer</td><td style='background-color:red;'>rerer</td></tr>
  <tr><td style='background-color:red;'>rerer</td><td style='background-color:red;'>rerer</td></tr>
  <tr><td style='background-color:red;'>rerer</td><td style='background-color:red;'>rerer</td></tr>
</table>
<h2></h2>
<table>
  <tr><td style='background-color:red;'>rerer</td><td style='background-color:red;'>rerer</td></tr>
  <tr><td style='background-color:red;'>rerer</td><td style='background-color:red;'>rerer</td></tr>
  <tr><td >rerer</td><td style='background-color:red;'>rerer</td></tr>
</table>

</body>
</html>

j0hnik · #7 (**permalink**) 04.07.2017, 02:57

Рони, Ок!

Форум

Справочник

Discord чат

Курсы javascript