Форум

strsin · #1 (**permalink**) 19.06.2016, 23:09

Здравствуйте коллеги.

С Javascript не работал, но вот понадобилось допилить страничку для вывода статистики.
Есть таблица, имя - цифра. Данные заполняются из БД. Поэтому количество строк и их порядок могут быть разными.

Первая задача - окрашивать цифру при увеличении определённого порога - это я сделал.
Вторая, то что у меня не получается - для разных фамилий этот порог разный, нужно сначала определять имя, смотреть какой у него порог и тогда окрашивать или нет цифру.

Таблица:

<tr>
	<asp:Repeater id="Infra_full" runat="server">
	<ItemTemplate>
		<tr>
			<td id = "nm"><%#DataBinder.Eval(Container.DataItem, "NM")%></td>
			<td id = "fhrpr"><%#DataBinder.Eval(Container.DataItem, "FHRR")%> %</td>

		</tr>
	</ItemTemplate>
	</asp:Repeater>
</tr>

Код скрипта изначально пробовал по принципу, который работает в PowerShell, но на Javascript это не прокатило. Почему, не могу понять:

<script type="text/javascript">
$('td#nm').each(function(){
    var n = $(this).text()
    if (n == "Viktor Pupkin") $('td#fhrpr'){
		var x = parseFloat($(this).text());
		if (x >= 5) $(this).css({color: 'Blue'})
    }
})
</script>

Пробовал по другому принципу, отметить искомые строчки, потом их окрасить, всё равно не работает:

<script type="text/javascript">
$('td#nm').each(function(){
    var n = $(this).text()
    if (n == "Viktor Pupkin") $('td#fhrpr').addClass("Group1")
    })

    $('td.Group1,td#fhrpr').each(function(){
    var x = parseFloat($(this).text());
    if (x >= 5) $(this).css({color: 'Blue'})
    })
</script>

Если вот тут поставить пробел, то вообще ничего не окрашивается, если запятую, то окрашивает всё столбцы, и выбранные, и не выбранные:

$('td.Group1,td#fhrpr')

рони · #2 (**permalink**) 19.06.2016, 23:19

strsin,
id уникально используйте классы

рони · #3 (**permalink**) 19.06.2016, 23:34

strsin,
вариант для неправильного id

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     td{
       border: solid 3px rgb(128, 0, 128);
       background-color: rgb(255, 255, 0);
     }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
$(function() {
    $("tr").each(function() {
        "Viktor Pupkin" == $("#nm", this).text() && $("#fhrpr", this).text(function(b, a) {
            5 <= +a && $(this).css({
                color: "Blue"
            })
        })
    })
});
  </script>
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>name</th>
			<th>num</th>

		</tr>
	</thead>
	<tbody>
		<tr>
			<td id = "nm">Viktor Pupkin</td>
			<td id = "fhrpr">1</td>
		</tr>
		<tr>
			<td id = "nm">Viktor Pupkin</td>
			<td id = "fhrpr">5</td>

		</tr>
	</tbody>
</table>
</body>
</html>

strsin · #4 (**permalink**) 19.06.2016, 23:45

рони
Не совсем понял, что значит для неправильного id?

Данный код не окрашивает ничего.

рони · #5 (**permalink**) 19.06.2016, 23:48

Сообщение от strsin

Не совсем понял, что значит для неправильного id?

Сообщение от рони

id уникально используйте классы

id не должно повторятся на странице.

Сообщение от strsin

Данный код не окрашивает ничего.

это ваш цветовой выбор

рони · #6 (**permalink**) 19.06.2016, 23:50

strsin,
вместо id должен быть class

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     td{
       border: solid 3px rgb(128, 0, 128);
       background-color: rgb(255, 255, 0);
     }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
$(function() {
    $("tr").each(function() {
        "Viktor Pupkin" == $("#nm", this).text() && $("#fhrpr", this).text(function(b, a) {
            5 <= +a && $(this).css({
                "background-color": "Blue",
                color : "rgb(255, 255, 255)"
            })
        })
    })
});
  </script>
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>name</th>
			<th>num</th>

		</tr>
	</thead>
	<tbody> <tr>
			<td id = "nm">Viktor Pupkin</td>
			<td id = "fhrpr">5</td>

		</tr>
		<tr>
			<td id = "nm">Viktor Pupkin</td>
			<td id = "fhrpr">1</td>
		</tr>
		<tr>
			<td id = "nm">Viktor Pupkin</td>
			<td id = "fhrpr">5</td>

		</tr>
	</tbody>
</table>
</body>
</html>

strsin · #7 (**permalink**) 20.06.2016, 00:04

Сообщение от рони

strsin,
вместо id должен быть class

Ой, точно первый тоже окрашивает, проглядел.

Но я так и не понял. Вы говорите использовать class, но в вашем скрипте сами используете id

рони · #8 (**permalink**) 20.06.2016, 00:49

Сообщение от strsin

Но я так и не понял. Вы говорите использовать class, но в вашем скрипте сами используете id

а вдруг вам с классом будет ещё непонятнее , когда примените класс, не забудьте поменять решётку на точку.

strsin · #9 (**permalink**) 20.06.2016, 01:59

С классами понятно. Скрипт работает.
Единственное, чтобы в таблице был знак % я добавил в скрипт parseFloat.

$('td#fhrpr').each(function(){
    var x = parseFloat($(this).text());
    if (x >= 5) $(this).css({color: 'Blue'})
    })

А вот тут я не пойму куда его засунуть, скрипт перестаёт работать куда бы не засунул:

$(function() {
    $("tr").each(function() {
        "Viktor Pup" == $("#nm", this).text() && $("#fhrpr", this).text(function(b, a) {
            5 <= +a && $(this).css({
                color: "Green"
            })
        })
    })
});

рони · #10 (**permalink**) 20.06.2016, 07:07

strsin,

$(function() {
    $("tr").each(function() {
        "Viktor Pup" == $("#nm", this).text() && $("#fhrpr", this).text(function(b, a) {
            5 <= parseFloat(a) && $(this).css({
                color: "Green"
            })
        })
    })
});

Форум

Справочник

Discord чат

Курсы javascript