1

将 list.js 和 tabletop 用于从 Gdoc 获取的可排序表时，我在 list.js 的第一行收到错误：“Uncaught TypeError: Cannot read property '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>

JS文件

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

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

2 回答 2

1

问题

var userList = new List('tablesetter', options);应该在 dom 具有list类的元素时执行；因为在问题的代码中，list该类默认为list"，所以这样的元素应该是仅当函数从谷歌接收数据时才会<tbody class="list">被附加到。#tablesettershowInfo

解决方案

我们确保var userList = new List('tablesetter', options)语句在函数之后（即：在末尾）执行showInfo；换句话说var userList = new List('tablesetter', options);，从函数options.js的右括号之前移动。showinfo

更多细节

在问题的代码中list.js尝试init()dom 时是： 主宰 并且list.list仍然是undefined定义list.js它的getItemSource()功能时： 未定义的 list.list

使用建议的修复程序，var userList = new List('tablesetter', options);dom 就像： 主宰

当定义它的getItemSource()功能时，list.list可以使用tbodyas aspect： 在此处输入图像描述

于 2018-09-25T02:51:58.657 回答
0

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

https://stackoverflow.com/a/23078200/4812515

于 2015-09-11T21:20:29.867 回答