首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery UI -JS生成的HTML表tbody不可排序() (npm webpack app)

jQuery UI -JS生成的HTML表tbody不可排序() (npm webpack app)
EN

Stack Overflow用户
提问于 2018-08-14 03:37:38
回答 1查看 103关注 0票数 0

我有一个用JS构建的表格。表中的数据由fetch请求后的JSON文件填充。我希望能够拖放这些tbody,并最终能够在每次重新定位后更新JSON文件。

我决定使用jquery-ui来处理排序。根据我对其他示例的理解,.sortable()带有拖放功能。例如,这是一个JSFiddle,它显示了.sortable()拖放在硬编码的超文本标记语言(电影1,电影2,...)中工作得很好。

但是,当涉及到动态JS生成的HTML时,tbody可以被拿起并拖来拖去,但不能被删除?怎么回事?在这方面的任何帮助都是非常感谢的,提前谢谢!

这就是我到目前为止所知道的:

getMovies.js

代码语言:javascript
复制
const getMovies = () => {
     return fetch('/api/movies')
.then(response => response.json());
};

module.exports = getMovies;

db.json

代码语言:javascript
复制
 {
 "movies": [
 {
  "title": "Movie 1",
  "rating": "5",
  "id": 1
},
{
  "title": "Movie 2",
  "rating": "5",
  "id": 2
},
{
  "title": "Movie 3",
  "rating": "5",
  "id": 3
},
{
  "title": "Movie 4",
  "rating": "5",
  "id": 4
}]}

index.js

代码语言:javascript
复制
import $ from 'jquery';
import 'jquery-ui/ui/widgets/sortable';
import 'jquery-ui/ui/widgets/droppable';

import getMovies from './getMovies.js';

const generateMovieList = () => {
    getMovies().then((movies) => {

    let html = '<table id="movie-list">';
        html += '<thead>';
        html += '<tr>';
        html += '<th>Film</th>';
        html += '</tr>';
        html += '</thead>';

        movies.forEach(({title}) => {
            console.log(title);
            html += `<tbody>`;
            html += `<tr><td>${title}</td></tr>`;
        });

        html += `</tbody>`;
        html += `</table>`;


        $('.container').html(html);


        $('tbody').sortable();


}).catch((error) => {
    alert('Check console for errors');
    console.log(error);
});
};
generateMovieList();

index.html

代码语言:javascript
复制
<div class="container">
    <!--this will be generated-->
</div>

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

package.json

代码语言:javascript
复制
{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
  "dev": "concurrently 'webpack-dev-server --open' 'json-server -d1200 
  --watch db.json'",
  "build": "webpack -p",
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node server.js"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "description": "",
 "dependencies": {
 "babel-core": "^6.25.0",
 "babel-loader": "^7.1.1",
 "babel-preset-env": "^1.5.2",
 "concurrently": "^3.5.0",
 "jquery": "^3.2.1",
 "jquery-ui": "^1.12.1",
 "jquery-validation": "^1.17.0",
 "json-server": "^0.11.2",
 "materialize-css": "^1.0.0-rc.2",
 "promise-polyfill": "^6.0.2",
 "webpack": "^3.0.0",
 "webpack-dev-server": "^2.5.0",
 "whatwg-fetch": "^2.0.3"
  } 
  }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-14 03:54:07

问题是你正在为每部电影创建一个新的tbody标签。

因此,与其这样做:

代码语言:javascript
复制
    movies.forEach(({title}) => {
        console.log(title);
        html += `<tbody>`;      ///////////////// this line
        html += `<tr><td>${title}</td></tr>`;
    });

    html += `</tbody>`;
    html += `</table>`;

在像这样迭代电影之前,你应该创建tbody标签:

代码语言:javascript
复制
    html += `<tbody>`;
    movies.forEach(({title}) => {
        console.log(title);
        html += `<tr><td>${title}</td></tr>`;
    });

    html += `</tbody>`;
    html += `</table>`;
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51829457

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档