3

我正在使用Bootstrap 弹出框。它没有显示在最后一行。我正在使用 jquery每个函数进行循环。

这是代码：

HTML:
<table id="Tableid" class="table " >
</table>


JS:

var table = $('#Tableid');
var hostId = 1;
var count = 0;
var row = $('<tr></tr>').addClass('test');
for(var i=0; i<10; i++){            

    for(j=0; j<3; j++){

        var button = "<button data-content = \""+hostId+"\" data-id=\""+hostId+"\"class=\"btn btn-primary btn-lg open-InfoModal\" data-toggle=\"modal\" rel=\"popover\" data-target=\"#hostInfo\" href=\"#infoModal\"></button>";
           $("[rel='popover']").popover({trigger: "hover"});

        var cell = $('<td style="text-align:center">'+hostId+'</td>').addClass('test').wrapInner(button);    //We use wrapInner to add HTML content
        hostId++;
        row.append(cell);
    }
    if(count<1) {
        count++;
    } else {

    table.append(row);
    row = $('<tr></tr>').addClass('test');
    count = 0;
    }
}

这是我的JSFiddle

4

2 回答 2

1

将此行移到脚本的末尾，在 for 循环之外：

$("[rel='popover']").popover({trigger: "hover"});

小提琴

于 2014-03-05T11:25:02.597 回答
1

尝试这个

var table = $('#Tableid');
var hostId = 1;
var count = 0;
var row = $('<tr></tr>').addClass('test');
for(var i=0; i<10; i++){            

    for(j=0; j<3; j++){

        var button = "<button data-content = \""+hostId+"\" data-id=\""+hostId+"\"class=\"btn btn-primary btn-lg open-InfoModal\" data-toggle=\"modal\" rel=\"popover\" data-target=\"#hostInfo\" href=\"#infoModal\"></button>";

        var cell = $('<td style="text-align:center">'+hostId+'</td>').addClass('test').wrapInner(button);    //We use wrapInner to add HTML content
        hostId++;
        row.append(cell);
    }
    if(count<1) {
        count++;
    } else {

    table.append(row);
        row = $('<tr></tr>').addClass('test');
        count = 0;
    }
}

$("[rel='popover']").each(function(i, e){
    $(e).popover({trigger: "hover"});
});

在这里查看 JsFiddle

于 2014-03-05T11:29:35.397 回答