使用JQuery为动态加载的表追加标头

时间:2011-11-07 20:26:34

标签: javascript jquery

我一直很难尝试将新标题添加到我使用从AJAX调用中获取的数据动态构建的表中。

我已经在这里问a question about my problem,但似乎没有合理的答案。

所以我的问题是我实际上无法获得我想要添加新信息的表格,我厌倦了这一点:

console.log(id); //This prints the right id!
//THIS is not working...
$('#'+id+' tr:first').append("<td>Well "+(wellCounter)+"</td>");
//...
//$('#'+401+' tr:first').append("<td>Well "+(wellCounter)+"</td>");--this will work
table+="<td>M "+fourthLevel.male+"</td>";
table+="<td>H "+fourthLevel.herm+"</td>";

但是它不起作用,所以我想知道你是否可以用另一种方法来帮助我获得相同的功能而不使用id来获取表格。也许最接近的功能会起作用,但我没有相关的经验,我试过但失败了。

这里是完整的代码:

    $.each(data, function(index, firstLevel) {
        $.each(firstLevel, function(index2, secondLevel) {
            var id = firstLevel['id'];
            var author = firstLevel['author'];
            var date = firstLevel['date'];
            var experimental_conditions = firstLevel['experimental_conditions'];
            if(index2 == 'items'){                      
                var table = '<div class=tableWrapper><table id=\"'+id+'\" class=\"experimentTable\">';
                table += '<input id=\"basketButton\" type=\"submit\" value=\"Add to basket\" class=\"basketButton\" experimentBatch=\"'+id+'\"> <div class="superHeader"><span class=\"superHeader\">Date: '+date+', By '+author+'</span><br /><span class=\"subHeader\">Experimental conditions: '+experimental_conditions+'</span>'
                table += '<tr><td></td><td COLSPAN=2>Totals</td></tr>';
                table += '<tr id="header"><td width="20%">Genotype</td><td width="10%"><img src="images/herma.png"></td><td width="10%"><img src="images/male.png"></td>';

                //for each table
                $.each(secondLevel, function(index3, thirdLevel) {
                    var nWells = 0;
                    table += "<tr><td><a href=\"wells.html?mutant="+thirdLevel.mutant_name_c+"&rnai="+thirdLevel.rnai_sequence_id_c+"&date="+thirdLevel.date_c+"&author="+author+"\" id=\"getWindow\">"+thirdLevel['mutant_name_c']+"</td><td>"+thirdLevel['herm_total']+"</td><td>"+thirdLevel['male_total']+"</a></td>";
                    currentRow = 3;
                    wellCounter = 0;
                    //for each row
                    $.each(thirdLevel, function(index4, fourthLevel) {
                        wellCounter++;
                        if (fourthLevel.date_r != undefined){
                            console.log(id);
                            //THIS is not working...
                            $('#'+id+' tr:first').append("<td>Well "+(wellCounter)+"</td>");
                            //...
                            table+="<td>M "+fourthLevel.male+"</td>";
                            table+="<td>H "+fourthLevel.herm+"</td>";
                        }
                    });
                });
                table +='</table></div>'
                $('#searchResults').append(table);
            }
        });
    });

注意:男性和女性是蠕虫性别,不是选择!

1 个答案:

答案 0 :(得分:1)

我没有查看你的代码,但是当我在jquery中使用动态表时,我尝试使用Jquery“OBJECT”。

之类的东西
var $tbl = $('<table />'), $tr=$('<tr />'), $td=$('<td />');

然后你可以添加attr,append等,并且更容易阅读和操作。

$tbl.attr('id',id).append($tr.append($td);