在Javascript生成的表格頂部添加一行

Question

我在表格結構中做了一個錯誤的計算。下面的代碼是爲了一個lotto遊戲（我認爲已知的一段代碼））

有沒有辦法在充滿數字的表頂部添加一行？我真的不知道該怎麼做。

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

你也可以做，使用insertBefore：

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

或before：

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

或prependTo：

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

Answer 2

使用insertRow()方法對你<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

在桌子上添加一行褪色背景：

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

添加背景過渡動畫：

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

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

Answer 5

另一種方式：[！鏈接]

var newHtml = '<div/>'; 

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