javascript - 循环表格以设置背景 css

Question

我的 HTML 表格有一些类并使用了表格标签

想要按原样保留类，但我所有的表和 tr 、 th 或 td 都使用 td bgcolor 这是一种旧技术。

我想循环遍历表格并查找是否定义了 bgcolor，使用相同的颜色并将其转换为基于 css 的背景颜色，以便我可以在 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

    }  
 }
}

因为 IE 由于某种原因无法使用 webkit 属性打印背景线条和颜色

Answer 1

我稍微清理了一下 for 循环。您可以使用 getAttribute 读取属性并设置样式。

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>

您只需使用 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>