Add a row on top of table generated by Javascript

Solution 1:

You can also do that using insertBefore:

$('<tr><td>Stuff</td></tr>').insertBefore('table > tbody > tr:first');

or with before:

$('table > tbody > tr:first').before('<tr><td>Stuff</td></tr>');

or with prependTo:

$("<tr><td>prependTo</td></tr>").prependTo("table > tbody");

Solution 2:

JQuery:

$("#myTable tbody").prepend("<tr><td>...contents...</td></tr>");

Solution 3:

Use the insertRow() method on your <tbody>

var myTable = document.getElementById('myTable'),
    tbody = myTable.tbodies[0],
    tr = tbody.insertRow(-1)  // puts it at the start
;

var td = document.createElement('td');
    td.innerHTML = "Something";
tr.appendChild(td);

Solution 4:

Add a row on top of table with a fade background:

$('button').click(function() {
  $('<tr class="anim highlight"><td>new text</td></tr>')
    .hide()
    .prependTo('table tbody')
    .fadeIn("slow")
    .addClass('normal');
});

Add background transition animation:

.anim {  
  transition: background 5s linear;
}
.highlight{
  background: #FF3333; 
}
.normal {  
  background: transparent;  
}

See http://jsfiddle.net/qdPAe/699/