0
我有一個格式化的表，我想我的數組的內容顯示在他們，但沒有任何顯示時，我加載我的網頁。它似乎沒有添加任何東西，我在我的HTML代碼中創建的tbody身份證。這是我的代碼。數組項沒有附加到HTML表格tbody與jQuery
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>
分享你的HTML也 –
好吧，我只是分享我的HTML代碼。 – user3386254
方法hideshow在哪裏？ –