Question

嗯，这是基本的，你可以得到！我在表的末尾插入一行并立即隐藏它。添加细胞后，我将背景着色，交替显示浅绿色和白色。我也有一些交替的蓝色和白色的密集填充列。文字很好地淡化，但一旦完成，背景颜色会闪烁一两秒。显然，这会将'哇'因素杀死'它必须是业余之夜'。

UPDATE：创建一个演示表来显示效果...排序（它现在仅适用于FF）。如果在表格上设置border =“1”，则在添加行时一切都会正常，整个单元格为蓝色或绿色。如果将边框设置为0，则会看到单元格周围的区域变为白色，然后返回到原始颜色。所以看起来最后渲染的是边框。

然而，这并不是我所看到的效果。在我的表格中，单元格的整个背景会像这样闪烁。文本和一些颜色淡入1/2秒，然后背景变为白色1/2秒，然后变回颜色。

UPDATE2：我让单元格更大，所以你可以看到它是整个背景，除了改变颜色的文本后面。如果将边框更改为“1”，则按预期工作。

<style type="text/css">
table#demo  {
  border-collapse: collapse;
  border-spacing:  0px;
  border-style:    none;
  font-size:       10px;
}

table#demo th {
  font-size:      10px;
  text-align:     center;
  vertical-align: bottom;
  border-style:   none;
    border-width:   0px;
}

table#demo td {
  font-size:       10px;
  text-align:      left;
  vertical-align:  top;
  text-decoration: none;
  font-weight:     none;
  padding:         0px 8px 0px 8px;
  border-style:    none;
  border-width:    0px;
}

.even_row2 {
  background-color: lightblue;
}
.odd_row2 {
  background-color: lightgreen;
}
</style>

<table id="demo_table" class="demo" border="1">
<thead>
<tr>
  <th width="75px">col 1</th>
  <th width="75px">col 2</th>
  <th width="75px">col 3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" onclick="addRow();" value="Add a row">

<script type="text/javascript">

var demoRowCnt=0;
function addRow() {

  ++demoRowCnt;

  var tbody = document.getElementById('demo_table').getElementsByTagName('tbody')[0];
  var rowObj = tbody.insertRow(tbody.rows.length);   
  $(rowObj).hide(); 

  var colNo = -1;
  var cell   = rowObj.insertCell(++colNo);
  cell.innerHTML = 'r' + demoRowCnt + ' c1';  

  cell   = rowObj.insertCell(++colNo);
  cell.innerHTML = 'r' + demoRowCnt + ' c2';  

  cell   = rowObj.insertCell(++colNo);
  cell.innerHTML = 'r' + demoRowCnt + ' c3';  


  // my colorRows function:
  var rowStyle = 'even_row2';

  for ( var r=0; r<tbody.rows.length; ++r ) {
    rowStyle = ( rowStyle == 'even_row2' ) ? 'odd_row2' : 'even_row2';
    var str = ( MSIE ) ? 'className' : 'class';
    tbody.rows[r].setAttribute('class', rowStyle);

  }

  $(rowObj).fadeIn("slow"); 

}
</script>

表格行的背景颜色在fadein与jquery之后闪烁

0 个答案: