在Javascript生成的表的顶部添加一行
我在表格结构中做了一个错误的计算。 下面的代码是一个乐透游戏（我认为是一段已知的代码）
有没有办法在充满数字的表顶部添加一行？ 我真的不知道该怎么做。
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/statichttp://img.dovov.comballen/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> 你也可以使用insertBefore来做到这一点：
$('<tr><td>Stuff</td></tr>').insertBefore('table > tbody > tr:first');
或之前 ：
$('table > tbody > tr:first').before('<tr><td>Stuff</td></tr>');
或prependTo ：
$("<tr><td>prependTo</td></tr>").prependTo("table > tbody");
JQuery的：
$("#myTable tbody").prepend("<tr><td>...contents...</td></tr>");
在你的<tbody>上使用insertRow()方法
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);
在具有淡入淡出背景的表格顶部添加一行：
$('button').click(function() { $('<tr class="anim highlight"><td>new text</td></tr>') .hide() .prependTo('table tbody') .fadeIn("slow") .addClass('normal'); });
添加背景过渡animation：
.anim { transition: background 5s linear; } .highlight{ background: #FF3333; } .normal { background: transparent; }
