0

我正在尝试构建一个 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-行形式

<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');
4

1 回答 1

1

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

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

问题是您的 html 中没有任何地方有像“data-footable”这样的属性。

jQuery 方法 .data('parm') 提取 data-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');
于 2015-10-30T16:50:30.097 回答