How to run make red line to row have different values on angular 7 ?

Question

3.00/5 (2 votes)

See more:

, +

How to run make red line to row have different values on angular 7 ?

the code i tried on jquery it working and make red line

I need to execute code below on angular 7

when load data on component make red line to row that have different values

Actually i need to apply same code exist on what i tried below on angular 7

after i put my code below on ngoninit event

i get error

Type 'Set<string>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.

What I have tried:

JavaScript

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
  MakeColorForDifferentContent();
});

function MakeColorForDifferentContent (){
  $("table tr").each((_, tr) => {
    var tempValue = $($(tr).find('td:first-child')).text();
    var tds = $(tr).find('td:not(:first-child)');
    
    var isDiff = false;
    tds.each((_, td) => {
      if($(td).text() !== tempValue){
        isDiff = true;
        return true;
      } 
    });
    
    if(isDiff)
     $(tr).css('color', 'red');
  });
}
</script>
</head>
<body>
<table border="1">
<col width="500">
<col width="500">
<col width="500">
<col width="500">
<tr bgcolor="#6699FF" width="100%">
    <th>Part1</th>
    <th>Part2</th>
    <th>Part3</th>
    <th>Part4</th>
<tr>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>12</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>17</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
</table>

</body>
</html>

Posted 5-Feb-20 23:27pm

ahmed_sa

Updated 6-Feb-20 0:56am

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Arthur V. Ratz · Answer 1 · 2020-02-05T23:45:00

I've got a solution at my end:

Here's your code submitted modification:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
  MakeColorForDifferentContent();
});

function MakeColorForDifferentContent (){
  $("table tr").each((row, tr) => {
    var tempValue = $($(tr).find('td:first-child')).text();
    var tds = $(tr).find('td:not(:first-child)');
    
    tds.each((col, td) => {
      if($(td).text() !== tempValue){
        return true;
      } 
    });
    
    if((row % 2) == 0) {
     $(tr).css('color', 'red'); 
     $(tr).css('background-color', 'lightgrey'); 
    }
  });
}
</script>
</head>
<body>
<table border="1">
<col width="500">
<col width="500">
<col width="500">
<col width="500">
<tr bgcolor="#6699FF" width="100%">
    <th>Part1</th>
    <th>Part2</th>
    <th>Part3</th>
    <th>Part4</th>
<tr>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>12</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>17</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>17</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
</table>

</body>
</html>

Apparently, here's what this code is intended to do. When .each(...) loop is executed for each row, it checks if the row index value is even or odd (e.g. if the division of the index value by 2 gives no reminder). If so, the css(...) method is called, changing the css color attributes to the desired background and text color, so that 0,2,4,6,8... rows are colored with lightgrey background and red text.

The code you submitted will not work, because it doesn't perform a check whether the background and text color for the current row must be changed.

Enjoy! :)

Arthur V. Ratz · Answer 2 · 2020-02-06T00:24:00

Solution 2

Also, my recommendation is to use Angular.js to be able to dynamically construct a table and list of rows in your HTML-document: https://docs.angularjs.org/api/ng/directive/ngRepeat[^]

Posted 6-Feb-20 0:24am

Arthur V. Ratz

Comments

ahmed_sa 6-Feb-20 6:27am

please can you help me to do that on angular 7

Arthur V. Ratz 6-Feb-20 6:29am

Just a moment. I will post my Angular 7 solution later on. Just stay tunned...

Arthur V. Ratz · Answer 3 · 2020-02-06T00:57:00

Here's a solution with Angular 7:

<h2 [style.color]="'red'">Products</h2>

<table border="0" cellpadding="0">

<div  *ngFor="let product of products; let i = index" [attr.data-index]="i">

  <tr [style.background-color]="(i % 2) ? 'lightgrey': 'white'">
    <td>
      {{ i }}
    </td>
    <td>
      {{ product.name }}
    </td>
  </tr>

</div>

</table>

Create a new project in https://angular.io/generated/live-examples/getting-started-v0/stackblitz.html[^] and replace the code in product-list/product-list.component.html with the code listed above.
https://malrnooedyj.angular.stackblitz.io[^]

How to run make red line to row have different values on angular 7 ?

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0