Thêm hàng trên đầu bảng được tạo bởi Javascript

Question

Tôi đã tính toán sai trong cấu trúc bảng. Mã bên dưới là trò chơi xổ số (một đoạn mã được biết đến mà tôi nghĩ;))

Có cách nào để thêm hàng trên đầu bảng được điền bằng một số không? Tôi thực sự không biết làm thế nào để làm điều này.

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

Bạn cũng có thể làm điều đó bằng insertBefore:

01.

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

hoặc với before:

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

hoặc với prependTo:

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

Answer 2

Sử dụng insertRow() phương pháp trên bạn <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

Thêm một hàng trên đỉnh bảng với một nền mờ dần:

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

Thêm hình ảnh động chuyển nền :

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

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

Answer 5

Một cách khác: [! Link]

var newHtml = '<div/>'; 

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