我有一个格式化的表，我希望我的数组的内容显示在其中，但是当我加载我的网页时没有显示任何内容。它似乎没有在我的html代码中创建的tbody id中添加任何内容。这是我的代码。
var Movie = function (movieTitle, movieYear, length, format, rating, favorite) {
this.movieTitle = movieTitle;
this.movieYear = movieYear;
this.length = length;
this.format = format;
this.rating = rating;
this.favorite = favorite;
};
var movies = new Array();
movies[0] = new Movie("Hangover", 2009, 210, "Dvd", 4, "Yes");
movies[1] = new Movie("Taken", 2008, 200, "BluRay", 5, "Yes");
movies[2] = new Movie("Avengers", 2011, 242, "Cloud", 3, "No");
movies[3] = new Movie("Iron Man", 2010, 311, "Computer", 4, "Yes");
movies[4] = new Movie("Rounders", 1990, 252, "Dvd", 5, "Yes");
movies[5] = new Movie("42", 2013, 202, "BluRay", 4, "No");
movies[6] = new Movie("Water Boy", 1988, 211, "Dvd", 5, "Yes");
movies[7] = new Movie("21", 2010, 192, "Cloud", 3, "No");
movies[8] = new Movie("I am Legend", 2009, "Computer", 5, "Yes");
movies[9] = new Movie("Titanic", 1997, 320, "Dvd", 2, "No");
$("#add").click(function(event){
var movie = new Movie(
$("#movieTitle").val(),
$("#movieYear").val(),
$("#lengthInMins").val(),
$("#formatSelections").val(),
$("#ratingSelections").val(),
$("#favoriteSelction").val()
);
movies[movies.length] = movie;
updateTableData();
$("#formMovieData").hide(500, function() {
$("#showMovies").show();
});
event.preventDefault(); // Prevents the defualt anchor actions
});
function updateTableData() {
//$("#movieData").empty();
var tbody = $("#movieData");
for (var i = 0; i < movies.length; i++) {
var id = i + "_" + movies[i]["movieTitle"];
var tr = "<tr>";
for (var key in movies[i]) {
tr += "<td>" + movies[i][key] + "</td>";
}
tr += "<td><a id='" + id + "' href='#'" + "> Edit </a></td>";
tr += "<td><a id='" + id + "' href='#'" + "> Delete </a></td>";
tr += "</tr>";
tbody.append(tr);
$("#" + id).click(function () {
var elementId = $(this).attr("id");
var idx = elementId.indexOf("_");
var index = parseInt(elementId.substr(0, idx));
$("#movieTitle").val(movies[index].movieTitle);
$("#movieYear").val(movies[index].movieYear);
$("#lengthInMins").val(movies[index].length);
$("#formatSelections").val(movies[index].format);
$("#ratingSelections").val(movies[index].rating);
$("#favoriteSelection").val(movies[index].favorite);
$("#showMovies").hide(500, function() {
$("#formMovieData").show();
});
});
}
}
这是我的html代码我已经硬编码了一些我希望在表格中显示的项目，我也可以添加一个新项目。我正在处理添加或删除信息的过程，但我需要先显示项目。
<!DOCTYPE html>
<html>
<head>
<title>Homework 3</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/StyleSheet.css" rel="stylesheet" />
<script src="../Scripts/jquery-2.1.0.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
</head>
<body>
<header><h1 class="bg-primary">The Movie Collection</h1></header>
<nav id="navigation" class="col-sm-3">
<ul class="nav navbar-default">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Movie Options
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a id="addMovieDataCmd" href="#">Add New Movies</a></li>
<li><a id="showMoviesCmd" href="#">Show All Movies</a></li>
<li><a id="browseNewMoviesCmd" href="http://www.fandango.com/new-dvd-releases">Browse New Release Movies</a></li>
</ul>
</li>
</ul>
</nav>
<div id="mainContent" class="col-sm-9">
<form id="formMovieData" class="form-horizontal">
<fieldset>
<legend>Add New Movie</legend>
<div class="form-group">
<label for="movieTitle" class="col-sm-1 control-label">Movie Title</label>
<div class="col-sm-offset-1 col-sm-5">
<input id="movieTitle" name="movieTitle" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="movieYear" class="col-sm-1 control-label">Year of Movie</label>
<div class="col-sm-offset-1 col-sm-5">
<input id="movieYear" name="movieYear" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="lengthInMins" class="col-sm-1 control-label">Length In Minutes</label>
<div class="col-sm-offset-1 col-sm-5">
<input id="lengthInMins" name="lengthInMins" type="number" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="format" class="col-sm-1 control-label">Format</label>
<div class="col-sm-offset-1 col-sm-5">
<select id="formatSelections" name="selections" class="form-control">
<option>Dvd</option>
<option>BluRay</option>
<option>Computer</option>
<option>Cloud</option>
</select>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-sm-1 control-label">Rating</label>
<div class="col-sm-offset-1 col-sm-5">
<select id="ratingSelections" name="selections2" class="form-control">
<option>1</option>
<option>2</option>
<option selected>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="favorites" class="col-sm-1 control-label">Favorite</label>
<div class="col-sm-offset-1 col-sm-5">
<select id="favoriteSelection" name="selections3" class="form-control">
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<input id="clear" name="clear" type="reset" value="Clear" class="btn btn-default" />enter code here
<input id="add" name="submit" type="submit" value="Add" class="btn btn-primary" />
</div>
</div>
</fieldset>
</form>
<div id="showMovies">
<fieldset>
<legend>List of Movies</legend>
<table class="table table-striped">
<thead>
<tr>
<th>Movie Id</th>
<th>Movie Title</th>
<th>Movie Year</th>
<th>Movie Length</th>
<th>Movie Format</th>
<th>Movie Rating</th>
<th>Favorite Movie</th>
</tr>
</thead>
<tbody id="movieData">
</tbody>
</table>
</fieldset>
</div>
</div>
<script src="../Scripts/homework3.js"></script>
</body>
</html>
答案 0 :(得分：0)
您在加载页面时忘记调用函数updateTableData()：
确保您通过以下方式执行此操作：
$(document).ready(function(){
updateTableData();
});
此外，您的按钮不应为submit类型，以便不提交表单，只需抛出Javascript事件：
<input id="add" name="submit" type="button" value="Add" class="btn btn-primary" />
最后，有一个非存在函数的方法调用：
hideshow("#formMovieData", 500, "#showMovies", 500);
您可以从代码中删除它。 （我没有看到在点击“添加”时使用一些隐藏/显示效果的任何优势）