Agregue una fila en la parte superior de la tabla generada por Javascript

Question

Hice un cálculo erróneo en una estructura de tabla. El código debajo es para un juego de lotería (una pieza conocida de código, creo;))

¿Hay alguna manera de agregar una fila en la parte superior de la tabla llena de números? Realmente no sé cómo hacer esto.

http://www.coldcharlie.nl/lotto/

<script type="text/javascript"> 

(function() { 

var players = { 
    Joop : ["6","8","16","18","26","28","32","36","38","41"], 
    Marijke: ["7","10","14","18","24","29","30","34","39","40"], 
    Michel : ["4","5","11","16","21","27","33","36","42","44"], 
    Mario : ["6","9","18","25","32","35","39","40","43","45"], 
    Diana : ["2","6","8","17","22","23","33","36","42","45"], 
    Agnes : ["3","5","10","15","26","29","32","37","41","44"], 
    Chris : ["5","7","8","9","11","12","16","28","30","32"], 
    Jeannette: ["1","2","4","7","8","11","13","28","30","38"], 
    Wieger: ["1","2","3","7","10","13","14","22","23","27"], 
    Anita: ["6","13","15","17","21","26","32","33","43","45"], 
    Thea: ["1","3","5","7","10","17","19","20","22","38"], 
    Danny: ["3","7","11","15","22","28","32","37","40","43"], 
    Cindy: ["2","4","16","18","21","24","33","38","41","44"], 
    Hanneke: ["1","3","4","12","18","21","25","30","36","40"], 
    Willem: ["3","9","17","21","27","33","35","39","41","42"] 
}, 

draws = [ 
    { 
    when: 'Datum: Zaterdag 08-08-2009', 
      picks:[2, 13, 15, 18, 21, 41] 
    }, 

    { 
    when: 'Datum: Zaterdag 15-08-2009', 
     picks:[6, 19, 24, 25, 35, 37] 
    }, 

    { 
    when: 'Datum: Zaterdag 22-08-2009', 
     picks:[8, 17, 23, 26, 37, 42] 
    }, 

{ 
    when: 'Datum: Zaterdag 29-08-2009', 
     picks:[1, 11, 31, 39, 42, 43] 
    } 
]; 



var buildPlayers = function(){ 
    var cont = $("#players"), table = $('<table></table>'); 
    for(player in players){ 
    if (players.hasOwnProperty(player)) { 
     var tr = $('<tr><th>' + player + '</th></tr>').appendTo(table), 
      len = players[player].length; 

     for (var i = 0; i < len; i++) { 
      var td = $('<td/>') 
    td.addClass("loss") 
    .addClass("pick_" + players[player][i]) // add the class to the td 
    .text(players[player][i]) 
    .appendTo (tr); 

    } 


    var winning = $('<td>').addClass('winning-col').appendTo(tr); 

     cont.append(table); 
    } 
    } 
}; 


var buildDraws = function(){ 
    var cont = $("#draws"); 
    for(var i = 0; i < draws.length; i++){ 
    var html = ["<div class='draw'>","<h4 class='drawNum'>Trekking "+(i+1)+"</h3></p>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"]; 

    for(var j = 0; j < draws[i].picks.length; j++) { 
     var img = '<img src="http://www.lotto.nl/static/images/ballen/lotto/l' 
     + draws[i].picks[j] 
     + '.jpg" alt="' 
     + draws[i].picks[j] 
     + '" />'; 
     html.push("<li>"+img+"</li>"); 
     showWin(draws[i].picks[j]); 
    } 



    html.push("</ol>","</div>"); 
    cont.append(html.join("")); 
    } 
}; 

var showWin = function(winNum){ 
    $(".pick_"+winNum).removeClass("loss").addClass("win"); 
}; 


$(function(){ 
    buildPlayers(); 
    buildDraws(); 
    function countWinning() { 
    $('#players table tr').each(function() { 
     var winning = $('td.win', this), total = 0; 
     winning.each(function(i,num) { 
     total+= parseInt($(this).text(), 10); 
     }); 

     $(".winning-col", this) 
    .text($("td.win", this).length) 
    .addClass("hilighted"); 

    }); 
    } 
    countWinning(); 
}); 


})(); 

</script> 

Answer 1

También puede hacer que el uso de insertBefore:

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

o con before:

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

o con prependTo:

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

Answer 2

Utilice el método insertRow() en su <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); 

Answer 3

JQuery:

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

Answer 4

añadir una fila en la parte superior de la mesa con un fondo de fundido:

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

Añadir animación de transición de fondo :

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

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

Answer 5

Otra forma: [! Link]

var newHtml = '<div/>'; 

$('#tBody').html(newHtml + $('#tBody').html());