Web mredkj.com

Tutorials - HTML Table Add Row with fade in

JavaScript to change the opacity of a table row when it's added

Try It

tblInsertRowFade header

---

JavaScript source

// Row Fade BETA.20060629
// mredkj.com
inProgressGlobal = false; // to prevent multiple calls while a fade is happening
function insertRowFade()
{
  if (!inProgressGlobal) {
    var tbl = document.getElementById('tblInsertRowFade');
    inProgressGlobal = true;
    newRowGlobal = tbl.tBodies[0].insertRow(0);
    if (tbl.rows.length % 2 == 1) newRowGlobal.className = 'other';
    newRowGlobal.style.visibility = 'hidden';
    var newCell = newRowGlobal.insertCell(0);
    newCell.innerHTML = 'cell 0';
    var newCell1 = newRowGlobal.insertCell(1);
    newCell1.innerHTML = 'cell 1';
    var newCell2 = newRowGlobal.insertCell(2);
    newCell2.innerHTML = 'cell 2';
    var countUp = 1;
    setTimeout('rowFade(' + countUp + ')', 200); // initial pause
  }
}
function rowFade(countUp)
{
  newRowGlobal.style.visibility = 'visible';
  for (var i=0; i<newRowGlobal.cells.length; i++) {
    newRowGlobal.cells[i].style.filter = 'alpha(opacity=' + (countUp * 10) + ')'; // IE
  }
  newRowGlobal.style.opacity = countUp / 10; // CSS 3
  countUp += 2;
  if (countUp < 10) {
    setTimeout('rowFade(' + countUp + ')', 75); // remaining pauses
  } else {
    inProgressGlobal = false;
  }
}
function deleteAllRows(tblId)
{
  var tbl = document.getElementById(tblId);
  for (var i=tbl.tBodies[0].rows.length-1; i>=0; i--) {
    tbl.tBodies[0].deleteRow(i);
  }
}

CSS source

#tblInsertRowFade td {
	background-color: #234567;
	color: #89abcd;
	padding: 10px;
}
#tblInsertRowFade tr.other td {
	background-color: #89abcd;
	color: #234567;
}