javascript - 显示表格内的数据
问题描述
我有我的 UI 的屏幕截图 我有一个表格之外的电影列表 我想创建一个按钮来显示下表中的所有电影 我有我的 css html 和 javascript 代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="mystyle.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<script src="execute.js"></script>
<title>My Movies</title>
<header>
<h1>Movies</h1>
</header>
<table class="table table-bordered table-hover" width="100%">
<thead style="background-color:#ddd;" class="table-borderless">
<body>
<tr>
<th></th>
<th></th>
<th>idmovielist</th>
<th>name</th>
<th>thumnail_path</th>
<th>description</th>
<th>year_released</th>
<th>language_released</th>
<th>Action</th>
<center>
<ul id = "movielist"></ul>
<button id = "showMovies" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">All Movies</button>
</center>
</tr>
</thead>
<tbody>
<tr>
<td align="center"></td>
<td><td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button id = "movieAdded" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Add
</button>
<button button id = "deleteMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
<button button id = "updatedMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Edit
</button>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td align="center"></td>
<td><td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button id = "movieAdded" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Add
</button>
<button button id = "deleteMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
<button button id = "updatedMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Edit
</button>
</td>
</tr>
</tbody>
<tbody>
<td align="center"></td>
<td><td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td>
<button id = "movieAdded" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Add
</button>
<button button id = "deleteMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
<button button id = "updatedMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Edit
</button>
</td>
</tbody>
<tbody>
<td align="center"></td>
<td><td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td>
<button id = "movieAdded" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Add
</button>
<button button id = "deleteMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
<button button id = "updatedMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Edit
</button>
</td>
</tbody>
<tbody>
<td align="center"></td>
<td><td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button id = "movieAdded" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Add
</button>
<button button id = "deleteMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
<button button id = "updatedMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Edit
</button>
</td>
</tbody>
<tbody>
<td align="center"></td>
<td><td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button id = "movieAdded" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Add
</button>
<button button id = "deleteMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
<button button id = "updatedMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Edit
</button>
</td>
</tbody>
</table> <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="container">
<form id="newForm">
<div class="form-group row">
<label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="intNum" placeholder="idmovielist">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
<div class="form-group row">
<label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-2 col-form-label">description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group row">
<label for="year_released" class="col-sm-2 col-form-label">year_released</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="year_released" placeholder="year_released">
</div>
</div>
CSS
body {
background-color: rgb(10, 200, 196);
font-family: sans-serif
}
h1 {
text-align: center;
font-family: arial;
color: #5a5a5a;
}
ul {
display: flex;
list-style:none;
flex-wrap: wrap;
align-items: flex-start;
justify-content:center;
flex-basis: 80%;
}
JS
$(function(){
const $movielist = $('#movielist');
const $idmovielist = $('#idmovielist');
const $name = $('#name');
const $thumnail_path = $('#thumnail_path');
const $description = $('description');
const $language_released = $('language_released');
const $year_released = $('year_released');
$("#showMovies").click(function(){
$.ajax({
method:"GET",
url: "http://localhost:3000/movielist",
dataType: "json",
success: function (response) {
$.each(response, function(i, movie) {
$movielist.append('<td>idmovielist: ' + movie.idmovielist + ',name:' + movie.name + ', thumnail_path: ' +
movie.thumnail_path + ', description: ' + movie.description + ', year_released: ' + movie.year_released +
', language_released: ' + movie.language_released + '</td>');
});
}
});
});
$("#movieAdded").click(function() {
const movies = {
idmovielist: $idmovielist.val(),
name: $name.val(),
thumnail_path: $thumnail_path.val(),
description: $description.val(),
year_released: $year_released.val(),
language_released: $language_released.val(),
};
$.ajax({
method:"POST",
url: "http://localhost:3000/movielist/addMovie",
data: movies,
success: function (newMovie) {
$movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
', language_released: ' + newMovie.language_released + '</li>');
}
});
});
$("#deleteMovie").click(function() {
const movies = {
idmovielist: $idmovielist.val(),
name: $name.val(),
thumnail_path: $thumnail_path.val(),
description: $description.val(),
year_released: $year_released.val(),
language_released: $language_released.val(),
};
$.ajax({
method:"DELETE",
url: "http://localhost:3000/movielist/3",
data: movies,
success: function (newMovie) {
$movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
', language_released: ' + newMovie.language_released + '</li>');
}
});
});
$("#updatedMovie").click(function() {
const movies = {
idmovielist: $idmovielist.val(),
name: $name.val(),
thumnail_path: $thumnail_path.val(),
description: $description.val(),
year_released: $year_released.val(),
language_released: $language_released.val(),
};
$.ajax({
method:"PUT",
url: "http://localhost:3000/movielist/update/2",
data: movies,
success: function (newMovie) {
$movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
', language_released: ' + newMovie.language_released + '</li>');
}
});
});
});
我已经设置了上面的代码，但是每当我运行该操作时，数据都会显示在表格之外。我认为我需要在我的 html 中更改一些内容
解决方案
推荐阅读
- flutter - Flutter URL Launcher Google Maps Multiple Maker
- autohotkey - 如何将编辑框 GUI 中的每一行存储到一个数组中？[自动热键图形用户界面]
- reactjs - 如何在反应合成中平均间隔列
- ios - AppStore 提交失败说 Missing Info.plist value - 'CFBundleIconName'，即使在拥有它之后
- svg - 如何沿 svg 路径为 svg 对象组设置动画
- azure - 视频索引器 [更新与 Azure 媒体服务的连接]
- javascript - 为什么使用 $match 时没有返回任何内容？
- charts - Chart.js 如何显示折线图而不在 xaxis 和 yaxis 上显示标签
- amazon-web-services - 对象存储不支持编辑/更新/追加文件的根本原因是什么？
- javascript - jQuery：无法使用 RegExp 精确搜索“+3.00”或“-3.00”