jQuery UI -JS生成的HTML表tbody不可排序() (npm webpack app)
jQuery UI -JS生成的HTML表tbody不可排序() (npm webpack app)
提问于 2018-08-14 03:37:38
我有一个用JS构建的表格。表中的数据由fetch请求后的JSON文件填充。我希望能够拖放这些tbody，并最终能够在每次重新定位后更新JSON文件。
我决定使用jquery-ui来处理排序。根据我对其他示例的理解，.sortable()带有拖放功能。例如，这是一个JSFiddle，它显示了.sortable()拖放在硬编码的超文本标记语言(电影1，电影2，...)中工作得很好。
但是，当涉及到动态JS生成的HTML时，tbody可以被拿起并拖来拖去，但不能被删除？怎么回事？在这方面的任何帮助都是非常感谢的，提前谢谢！
这就是我到目前为止所知道的：
getMovies.js
const getMovies = () => {
return fetch('/api/movies')
.then(response => response.json());
};
module.exports = getMovies;db.json
{
"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
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
<div class="container">
<!--this will be generated-->
</div>
<script type="text/javascript" src="main.js"></script>package.json
{
"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"
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-14 03:54:07
问题是你正在为每部电影创建一个新的tbody标签。
因此，与其这样做：
movies.forEach(({title}) => {
console.log(title);
html += `<tbody>`; ///////////////// this line
html += `<tr><td>${title}</td></tr>`;
});
html += `</tbody>`;
html += `</table>`;在像这样迭代电影之前，你应该创建tbody标签：
html += `<tbody>`;
movies.forEach(({title}) => {
console.log(title);
html += `<tr><td>${title}</td></tr>`;
});
html += `</tbody>`;
html += `</table>`;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51829457
复制相关文章
相似问题
腾讯云开发者
