FooTable是未定义的错误

Question

我正在尝试构建一个fooTable，其中我的表头声明位于另一个表单上，而html行字段位于另一个表单上。这是设计，

pro

    <table class="footable table" id="L-EGY-TRG-501-00BP_fooTable" >
        <thead>
            <tr>
                    <th data-sort-initial="true" data-toggle="true">Employed by</th>
                    <th>Category</th>
                    <th data-hide="phone, tablet">Sub-Category</th>
                    <th data-hide="phone, tablet">Attendee Count</th>
            </tr>
        </thead>
      <tbody id="L-EGY-TRG-501-00BP_fooTableBody">
    </tbody>
</table>

trg-行表

<table>
    <tr id="yyy" data-losstype="fin-row" data-GUID="L-EGY-TRG-ROW-501-003H">
        <td>
            <input type="text" class="form-control" id="yyy_EmployedBy" name="yyy_EmployedBy" value=""   >
        </td>
        <td>
            <input type="text" class="form-control" id="yyy_Category" name="yyy_Category" value=""   >
        </td>
        <td>
            <input type="text" class="form-control" id="yyy_SubCategory" name="yyy_SubCategory" value=""   >
        </td>
        <td>
            <input type="text" class="form-control" id="yyy_attendeecount" name="yyy_attendeecount" value=""   >
        </td>


        <td>
            <button type="button" class="btn btn-sm btn-default btn-rounded" onClick="#" title="Add Attendee Row">
                    <i class="fa fa-plus"></i>
            </button>
            &nbsp;
            <button type="button" class="btn btn-sm btn-default btn-rounded removeRowLink" onClick="#" title="Remove Attendee Row">
                    <i class="fa fa-minus"></i>
            </button>
        </td>

    </tr>
</table>

这就是我使用JQuery的方法，

$(document).ready(function(){
        guid="xxxxx"
        prepTable("/pro?openform,guid); //
});
function prepTable(surl,guid){
            $.get( surl, function( data ) {               

        var footable = $(data).find('.footable').footable();

        guid="xxxxx";                     
        buildFooTable(guid,"/trg-row?openform");

            });
}

 funtion buildFooTabl(containerID,surl) {
        $.get( surl, function( data ) {  
            var $row = $(data).find('#yyy');
            var footable = $('#' + containerID + '_fooTable').data('footable');
            var rowid = $row.attr('data-GUID');
            $row.find('[id*=yyy]').each(function() {
                   var id = this.id || "";
                   this.id = id.replace('yyy', rowid)
              });
            $row.find('[name*=yyy]').each(function() {
                var nm = this.name || "";
                    this.name = nm.replace('yyy', rowid)
             });

         $row.attr('id',rowid);
             footable.appendRow($row);
        });

但是在这一行中得到的错误"TypeError: footable是未定义的“，但是fooTable id是正确的。

var footable = $('#' + containerID + '_fooTable').data('footable');

Answer 1

您所得到的错误在这条线上：

var footable = $('#' + containerID + '_fooTable').data('footable');

问题是在html中没有像"data-footable“这样的属性。

jQuery方法.data('parm')提取数据-parm属性的值。这个参数是无关的。如果你有这样的div：

<div id="mydiv" data-mytext="This is my text"></div>

你这样做：

var mytext = $('#mydiv').data('mytext')
alert(mytext);

警报会说：“这是我的短信”。因为.data('mytext')函数已经提取了data-mytext属性的值。

那么，您要加载到var footable中的是什么呢？如果您试图获取对表的引用，并且拥有正确的containerID，那么您只需要

var footable = $('#' + containerID + '_fooTable');