Javascript将行添加到Javascript生成的表中

时间:2009-08-31 14:41:55

标签: javascript jquery

有人可以告诉我在哪里添加一小段代码,在包含数字的表格上添加一行。我只需要添加一行,但是下面的代码供应,15个单元格放在彼此的顶部,我认为代码为每个名称放置了一个单元格。

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

上面的代码是适合某个地方的代码。

我尝试在

下面的这个部分之前添加它
$('#players table tr').each(function()

这是应该放在某处的代码

<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>

2 个答案:

答案 0 :(得分:1)

我通常不会这样做,但是因为我几天前写了详细,我会给你一个链接:

http://notetodogself.blogspot.com/2009/08/javascript-insert-table-rows-table-body.html

答案 1 :(得分:1)

这些都会在表格的开头添加一行:

使用insertBefore

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

使用before

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

使用prependTo

$("<tr><td>some data</td></tr>").prependTo("#players > tbody");

使用prepend

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

如果表格是动态生成的,您可能想尝试省略选择器中的tbody标记,例如:

$('<tr><td>Stuff</td></tr>').insertBefore('#players > tr:first');