在 Javascript 生成的表格顶部添加一行答案

【问题标题】：Add a row on top of table generated by Javascript在 Javascript 生成的表格顶部添加一行
【发布时间】：2010-11-24 03:07:39
【问题描述】：

我在表格结构中计算错误。下面的代码是一个乐透游戏（我认为是一段已知的代码；））

有没有办法在填满数字的表格顶部添加一行？我真的不知道该怎么做。

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>

【问题讨论】：

这在另一个线程link!中得到了回答

标签： javascript jquery html

【解决方案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");

【讨论】：

我相信 prependTo 是最好的选择，因为即使 tbody 为空，它也可以工作。其他依赖于现有的第一个 tr。
有谁知道这个符号叫什么？ table > tbody 等？编辑：回答了我自己的问题"Child Selector"
如果表中没有起始行（），说前两个不起作用是否正确？
你们知道如何对特定表执行此操作吗？假设您在同一页面上有多个表，但您想插入到 id=table1 的表中
使用前置，在我的头前添加行..想知道为什么。

【解决方案3】：

在您的<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);

【讨论】：

这怎么能放在我的桌子上，我不知道。
@Chris Charabaruk - 实际上，这个问题被标记为 jQuery 和 Javascript。两者并不相互排斥，而且 OP 并没有专门要求 jQuery 解决方案，所以这是一个很好的答案。已删除反对票。
谢谢卡里姆。（当我回答时没有 jquery 标签...）
我真的迷路了，我不知道把所有这些代码放在哪里，有人可以用我提供的代码做一个例子吗？
我想自 2009 年以来情况发生了变化，这篇文章仍然作为 2020 年最相关的搜索弹出。w3schools.com/jsref/met_table_insertrow.aspThe value of -1 can also be used, this results in a new row being inserted at the last position.。您可能想在 2020 年执行 insertRow(0) （或 1，如果您有标题）。此外，tbodies 应该是 tBodies 但并不真正相关，因为您应该致电insertRow()这几天直接在表对象上，myTable.insertRow(0)。