1

嗯，这是你能得到的最基础的东西！我在表格末尾插入一行并立即将其隐藏。添加单元格后，我对背景进行着色，交替使用浅绿色和白色。我也有一些交替的蓝色和白色用于密集填充的列。文本淡入淡出，但一旦完成，背景颜色会闪烁一两秒钟。显然，这会消除“它一定是业余之夜”的“哇”因素。

更新：创建了一个演示表来显示效果......有点（它现在只适用于 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>
4

0 回答 0