Question

我正在尝试创建一个表单，在提交时，使用Listjs列出用户规范中的所有可用航班。我不知道出了什么问题，但是当我尝试手动向列表中添加内容时，没有任何反应。 HTML：

<div class="box-body table-responsive no-padding" id="search-list">
    <table class="table table-hover">
        <tr>
            <th class="sort" data-sort="flight">Flight</th>
            <th class="sort" data-sort="departure">Departing</th>
            <th class="sort" data-sort="arrival">Arriving</th>
            <th class="sort" data-sort="duration">Dur.</th>
            <th class="sort" data-sort="aircraft">Aircraft</th>
            <th class="sort" data-sort="cat">CAT</th>
            <th class="sort" data-sort="operation">Operating</th>
            <th class="sort" data-sort="carrier">Carrier</th>
        </tr>
        <tbody class="list">
        </tbody>
    </table>
</div>
<div style="display:none;">
    <!-- A template element is needed when list is empty, TODO: needs a better solution -->
    <tr id="search-item">
        <td class="flight"></td>
        <td class="departure"></td>
        <td class="arrival"></td>
        <td class="duration"></td>
        <td class="aircraft"></td>
        <td class="cat"></td>
        <td class="operation"></td>
        <td class="carrier"></td>
    </tr>
</div>

我不是100％确定它是否相关，但我也从list.min.js文件Uncaught TypeError: Cannot read property 'cloneNode' of null中得到此脚本错误。

使用Javascript：

<script src="../js/list.min.js" type="text/javascript"></script><!-- List.js -->

<script type="text/javascript">
var options = {
     valueNames: [ 'flight', 'departure', 'arrival', 'duration', 'aircraft', 'cat', 'operation', 'carrier' ],
    item: 'search-item'
};

var searchlist = new List('search-list', options);

searchlist.add({ flight: 'mdkwoan', departure: 'afds2f', arrival:'adsfwef', duration:'Fjwefjhidni', aircraft:'ksoksj', cat:'kaojajs', operation:'joskemeks', carrier:'fasfbijbfiukfd' });
</script>

Answer 1

你不能使用＆＃34; tr＆＃34;作为根据文档的模板

◦itemString，默认值：未定义ID到项目模板元素或a HTML字符串（通知：不适用于<tr>）

以下是带有此措辞的文档的链接 - http://listjs.com/docs/options

这应该可行。更新您的tbody并在您的选项中省略模板

 <tbody class="list">
    <tr id="search-item">
      <td class="flight"></td>
      <td class="departure"></td>
      <td class="arrival"></td>
      <td class="duration"></td>
      <td class="aircraft"></td>
      <td class="cat"></td>
      <td class="operation"></td>
      <td class="carrier"></td>
    </tr>
  </tbody>

你如何使用search来创建一个包含list.js的表？

1 个答案: