Home » Jquery » javascript – loop over table to set the background css-Exceptionshub

javascript – loop over table to set the background css-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

My HTML table has some classes and table tag is used

Want to retain the classes as is, but all my table and tr , th or td are using td bgcolor which is an old technique.

I want to loop over the table and find if that bgcolor is defined, use the same color and convert it to a css based background color so i can print it in IE

function setBackground() {

var table = document.getElementById("table1"); 

//i found this in a previous stack overflow answer and tried it

for (var i = 0, row; row = table.rows[i]; i++) { 

   for (var j = 0, col; col = row.cells[j]; j++) { 

  //this is for debugging purposes... I can't even get this to work
   alert(table.rows[i].cells[j]); 

   table.rows[i].cells[j].style.background = "orange"; //just an example

    }  
 }
}

because IE is not able to print the background lines and colors for some reason using the webkit property

How to&Answer:

as Taplar mentioned in the comment :

Use document.querySelectorAll('td[bgcolor]') to get the td that have bgcolor, loop through them and set the background to that color :

document.querySelectorAll('td[bgcolor]').forEach(e => {
  const bgColor = e.getAttribute('bgcolor');

  e.removeAttribute('bgcolor'); // optional, if you want to remove the attribute

  e.style.background = bgColor;
})
<table id="table1">
  <thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </thead>
  <tbody>
    <tr>
      <td bgcolor="red">1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td bgcolor="green">5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td bgcolor="blue">9</td>
    </tr>
  </tbody>
</table>

Answer:

I cleaned up the for loops a little. You can read the attribute with getAttribute and set the style.

var table = document.getElementById("table1");
for (var i = 0; i < table.rows.length; i++) {
  var row = table.rows[i]
  for (var j = 0; j < row.cells.length; j++) {
    var cell = row.cells[j]
    var bgc = cell.getAttribute('bgcolor')
    if (bgc) {
      cell.style.background = bgc
    }
  }
}
td {
  width: 30px; height: 30px;
}
<table id="table1">
  <tr>
    <td bgcolor="red"></td>
    <td></td>
    <td bgcolor="blue"></td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="green"></td>
    <td></td>
  </tr>
  <tr>
    <td bgcolor="yellow"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td bgcolor="silver"></td>
    <td></td>
    <td></td>
  </tr>
</table>

You can just do it with one loop with getElementsByTagName

var tds = document.getElementById("table1").getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
  var cell = tds[i]
  var bgc = cell.getAttribute('bgcolor')
  if (bgc) {
    cell.style.background = bgc
  }
}
td {
  width: 30px; height: 30px;
}
<table id="table1">
  <tr>
    <td bgcolor="red"></td>
    <td></td>
    <td bgcolor="blue"></td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="green"></td>
    <td></td>
  </tr>
  <tr>
    <td bgcolor="yellow"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td bgcolor="silver"></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer:

Get the color if found and then do with it whatever needed…

function setBackgroundColor(colorValue) {
  const table = document.getElementById("table1");
  const rows = table.children[0].rows
  
  for (let i = 0; i < rows.length; i++) {
    const tds = rows[i].children;
    for (let j = 0; j < tds.length; j++) {
      if (tds[j].bgColor === colorValue) {
        console.log('Color found, do action')
      
      }
    }
  }
}

setBackgroundColor('red')
<table id="table1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td bgcolor="red">January</td>
    <td bgcolor="green">$100</td>
  </tr>
</table>

Answer:

You can do this:

var cells = $("#targetTable td");
for(i in cells){
    color = $(cells[i]).attr('bgcolor');
    console.log(color);
    $(cells[i]).css({background: color});
}