Question

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.

Answer 1

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>

Answer 2

为什么不在创建行之前执行此操作？这里没有jQuery的例子。你混合了jQuery和vanilla，这是不好的做法。另外，你的缩进非常糟糕。保持您的代码整洁，以便于您和其他人更容易阅读。

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>

target current element with .each()

2 个答案: