Jquery 在动态选项卡中添加Jqgrid

我有一个jquery函数，它将内容添加到动态选项卡中。目前它正在显示一个段落。现在我想显示Jqgrid而不是段落，但我无法实现这一点

JS函数

        function addTab(title){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                var content = '<p>Hello</p>';
                $('#tt').tabs('add',{
                    title:title,
                    content:content,
                    closable:true
                });
            }
        }

函数添加选项卡（标题）{
if（$（'#tt'）.tabs（'exists'，title））{
$（'#tt'）。选项卡（'选择'，标题）；
}否则{
var content='Hello
'；
$（'#tt'）。制表符（'添加'{
标题:标题,，
内容:内容,，
closable:对
});
}
}

JQgrid

        <table id="list"></table>

            var grid = $("#list");
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['Room No', '12', '13','14','15','16'],
                colModel:[
                    {name:'Room No',index:'Room No', width:42, align:'center'},
                    {name:'',index:'', editable:true, align:'center'},
                    {name:'amount',index:'amount', editable:true, align:'center'},
                    {name:'tax',index:'tax', editable:true,align:'center'},
                    {name:'total',index:'total', editable:true,align:'center'},
                    {name:'note',index:'note', sortable:false,align:'center'}
                ],
                height: "100%",
                autowidth: true,
                localReader: {
                    repeatitems: true,
                    cell: "",
                    id: 0
                }
            });

风险值网格=$（“#列表”）；
grid.jqGrid({
数据类型：“本地”，
数据：mydata，
ColName:[“房间号”、“12”、“13”、“14”、“15”、“16”]，
colModel：[
{名称：'Room No'，索引：'Room No'，宽度：42，对齐：'center'}，
{名称：''，索引：''，可编辑：true，对齐：'center'}，
{name:'amount'，index:'amount'，可编辑：true，align:'center'}，
{名称：'tax'，索引：'tax'，可编辑：true，对齐：'center'}，
{名称：'total'，索引：'total'，可编辑：true，对齐：'center'}，
{name:'note'，index:'note'，sortable:false，align:'center'}
],
高度：“100%”，
自动宽度：正确，
本地阅读器：{
重复项：对，
单元格：“”，
身份证号码：0
}
});

与您通过

的方式相同，您通过

的方式如下：

function addTab(title){
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var content = '<table id="list"></table><div id="pager"></div>';
        initGrid();
        $('#tt').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
}

function initGrid() {
    var grid = $("#list");
        grid.jqGrid({
            datatype: "local",
            data: mydata,
            colNames:['Room No', '12', '13','14','15','16'],
            colModel:[
                {name:'Room No',index:'Room No', width:42, align:'center'},
                {name:'',index:'', editable:true, align:'center'},
                {name:'amount',index:'amount', editable:true, align:'center'},
                {name:'tax',index:'tax', editable:true,align:'center'},
                {name:'total',index:'total', editable:true,align:'center'},
                {name:'note',index:'note', sortable:false,align:'center'}
            ],
            height: "100%",
            autowidth: true,
            pager: '#pager',
            localReader: {
                repeatitems: true,
                cell: "",
                id: 0
            }
        });
}

函数添加选项卡（标题）{
if（$（'#tt'）.tabs（'exists'，title））{
$（'#tt'）。选项卡（'选择'，标题）；
}否则{
var内容=“”；
initGrid（）；
$（'#tt'）。制表符（'添加'{
标题:标题,，
内容:内容,，
closable:对
});
}
}
函数initGrid（）{
风险值网格=$（“#列表”）；
grid.jqGrid({
数据类型：“本地”，
数据：mydata，
ColName:[“房间号”、“12”、“13”、“14”、“15”、“16”]，
colModel：[
{名称：'Room No'，索引：'Room No'，宽度：42，对齐：'center'}，
{名称：''，索引：''，可编辑：true，对齐：'center'}，
{name:'amount'，index:'amount'，可编辑：true，align:'center'}，
{名称：'tax'，索引：'tax'，可编辑：true，对齐：'center'}，
{名称：'total'，索引：'total'，可编辑：true，对齐：'center'}，
{name:'note'，index:'note'，sortable:false，align:'center'}
],
高度：“100%”，
自动宽度：正确，
寻呼机：“#寻呼机”，
本地阅读器：{
重复项：对，
单元格：“”，
身份证号码：0
}
});
}

我尝试了您的解决方案，但无法在动态选项卡中看到网格。为什么？在添加之前和之后的警报时，我同时得到了这两个警报，但没有看到网格。var content=''；警惕（“你好”）；initGrid（）；警报（“hii”）；