Question

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

专业表格

    <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-row表单

<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 is undefined”错误，但fooTable id正确显示。

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

Answer 1

你得到的错误就在这条线上：

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

问题是你的html中没有任何地方有像＃34; data-footable＆＃34;这样的属性。

jQuery方法.data（＆＃39; parm＆＃39;）提取data-parm属性的值。该参数是无关紧要的。如果你有这样的div：

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

你这样做：

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

警报会说; ＆＃34;这是我的文字＆＃34;。因为.data（＆＃39; mytext＆＃39;）函数已经提取了data-mytext属性的值。

那么你想要加载到var footable中的是什么？如果你想获得对你的表的引用并且你有正确的containerID，那么你只需要

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

FooTable是未定义的错误

1 个答案: