Javascript list.js可排序表出错_Javascript_Jquery_Html_Listjs

Javascript list.js可排序表出错

javascript jquery html

Javascript list.js可排序表出错,javascript,jquery,html,listjs,Javascript,Jquery,Html,Listjs,当使用list.js和tabletop处理从Gdoc获取的可排序表时，我在list.js的第一行得到错误：“uncaughttypeerror:cannotreadproperty'childNodes'of undefined” 因为我工作的网站只能上传JS，我需要使用JS或jquery编写所有html，所以有点不稳定。我认为这个错误是因为我拥有一切的顺序，但是我试着移动东西却没有用。除分拣外，一切正常谢谢 HTML文件 <!DOCTYPE html> <ht

当使用list.js和tabletop处理从Gdoc获取的可排序表时，我在list.js的第一行得到错误：“uncaughttypeerror:cannotreadproperty'childNodes'of undefined”

因为我工作的网站只能上传JS，我需要使用JS或jquery编写所有html，所以有点不稳定。我认为这个错误是因为我拥有一切的顺序，但是我试着移动东西却没有用。除分拣外，一切正常

谢谢

HTML文件

    <!DOCTYPE html>
   <html>
   <head>
      <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="list.js-master/dist/list.min.js"></script>
      <script type="text/javascript" src="src/tabletop.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

<div id="tablesetter"></div>

 </body>

<script type="text/javascript">

var url = 'url to gdoc here';

$(document).ready( function(){
  Tabletop.init( {key: url, callback: showInfo, parseNumbers: true} )})

function showInfo(data, tabletop){

  $("#tablesetter").append('<h2>Table Working</h2><table><thead><th class="sort" data-sort="university">University</th><th class="sort" data-sort="no">Billionaires</th><th class="sort" data-sort="no2">Billionaires Rank</th><th class="sort" data-sort="rank">U.S. News Rank</th></thead><tbody class="list"></tbody></table>');


 $.each(tabletop.sheets("Sheet1").all(), function(i, cat){

    var htmltable = $('<tr><td class="university">' + cat.university + '</td>');
          htmltable.append('<td class="no">' + cat.numberofbillionaires + '</td>');
          htmltable.append('<td class="no2">' + cat.rankedbybillionaires + '</td>');
          htmltable.append('<td class="rank">' + cat.usnewsranking + '</td></tr>');
          htmltable.appendTo("tbody");
  })

}

</script>
  <script type="text/javascript" src="options.js"></script>


</html>

如果你看了这篇文章，我敢肯定你只是缺少了list.js正常运行的一些最低要求。尝试使用id和“search”类以及其他类动态添加输入。让我知道这是否有帮助

问题

var userList=新列表（'tablesetter'，选项）列表

类的元素时，应该执行code>；由于在问题的代码中，列表
类默认为列表
，因此此类元素应该是
，只有当showInfo
函数从google接收数据时，才会附加到#tabletter

解决方案
我们确保var userList=new List（'tablesetter'，options）
语句在showInfo
函数之后（即：在末尾）执行；换句话说，movevar userList=new List（'tablesetter'，options）
来自options.js
的showinfo
函数右括号前
更多细节
在问题的代码中，当list.js
尝试init（）时，dom是：
当list.js
定义它的getItemSource（）
函数时，list.list
仍然是未定义的：

对于建议的修复，在var userList=newlist（'tablesetter'，options）；dom类似于：

当定义它的getItemSource（）
函数时，list.list
可以使用tbody，具体如下：

var options = {
  valueNames: [ 'university', 'no' , 'no2' , 'rank']
};

var userList = new List('tablesetter', options);