CODEWITHSUNDEEP
javascriptjquery
Angel
Angel

Reputation: 100

target current element with .each()

So I'm trying to color only few rows of a table by looping into it.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <style>
    .blue{
      background-color : blue;
    }
  </style>
</head>
<table id="myTable"></table>
<body>
    <script
 src="https://code.jquery.com/jquery-3.3.1.min.js"
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous"></script>


 <script>

 arr1 = [
  "Name1", "Name2", "Name3"
  ];

arr2 = ["8", "4", "2"]

arr3 = ["4", "5", "1"]



 for (var j = 0; j < 3; j++) {

var table = document.getElementById("myTable");
var row = table.insertRow(j);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell1.innerHTML = arr1[j]
cell2.innerHTML = arr2[j]
cell3.innerHTML = arr3[j]
 }

     var cell2cont = $('#myTable').find('td:nth-child(2)')[0];
     var cell3cont = $('#myTable').find('td:nth-child(3)')[0];
     cell2value = Number(cell2cont.innerHTML);
     cell3value = Number(cell3cont.innerHTML);

    trs = $('#myTable').find('tr')

  trs.each(function(){

     if(cell2value>cell3value){         
      trs.addClass('blue')
     }
 })

</script>

  </body>
</html>

Fiddle : https://jsfiddle.net/mo1Luszw/

In the result, the middle row is colored too but since cell2value isn't > cell3value in this row, I would like it to remain white.

I've also tried looping through each row :

 for(i=0; i<trs.length; i++){
     if(cell2value>cell3value){         
      trs.eq(i).addClass('blue')
     }
    }

Same result. Any help ? Thanks.

Upvotes: 0

Views: 53

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28505

Why don't you do this before creating the rows? Here an example without jQuery. You were mixing jQuery and vanilla, which is bad practice. Also, your indentation was very bad. Keep your code nice and tidy so it is easier to read, for you and others.

const arr1 = ["Name1", "Name2", "Name3"];
const arr2 = ["8", "4", "2"];
const arr3 = ["4", "5", "1"];
const arrList = [arr1, arr2, arr3];

const table = document.querySelector("#myTable");
for (let j = 0; j < 3; j++) {
  const row = document.createElement("tr");

  for (let k = 0; k < 3; k++) {
    const cell = document.createElement("td");
    cell.innerHTML = arrList[k][j];
    row.appendChild(cell);
  }

  if (arr2[j] > arr3[j]) {
    row.classList.add("blue")
  }

  table.appendChild(row);
}
.blue {
  background: blue;
}
<table id="myTable"></table>

Upvotes: 0

Eliellel
Eliellel

Reputation: 1446

You just need to retrieve the value of cells inside .each() function.

 
  arr1 = [
      "Name1", "Name2", "Name3"
    ];

  arr2 = ["8", "4", "2"]

  arr3 = ["4", "5", "1"]



  for (var j = 0; j < 3; j++) {

    var table = document.getElementById("myTable");
    var row = table.insertRow(j);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    cell1.innerHTML = arr1[j]
    cell2.innerHTML = arr2[j]
    cell3.innerHTML = arr3[j]
  }
  
    

        trs = $('#myTable').find('tr')

      trs.each(function(){

        var cell2cont = $(this).find('td:nth-child(2)')[0];
        var cell3cont = $(this).find('td:nth-child(3)')[0];
        cell2value = Number(cell2cont.innerHTML);
        cell3value = Number(cell3cont.innerHTML);

         if(cell2value>cell3value){         
          $(this).addClass('blue')
         }
  })
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <style>
        .blue{
          background-color : blue;
        }
      </style>
    </head>
    <table id="myTable"></table>
    <body>
        <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Upvotes: 1

Related Questions