英文:
Javascript table using this for objects
问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
</head>
<body>
<h1>My Library Book List</h1>
<p>This is my simple library project using object oriented javascript.</p>
<p id="myBooks"></p>
<br>
<form action="#" method="post">
<label for="title">Title:</label>
<input type="text" id="title" name="title"><br>
<label for="author">Author:</label>
<input type="text" id="author" name="author"><br>
<label for="pages">Pages:</label>
<input type="text" id="pages" name="pages"><br>
<input type="submit" id="submit" value="Submit">
</form>
<script>
document.getElementById("submit").addEventListener("click", function(event){
event.preventDefault();
});
</script>
<br>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Pages</th>
</tr>
<tr>
<td id="tableTitle"></td>
<td id="tableAuthor"></td>
<td id="tablePages"></td>
</tr>
</table>
<br>
<button onclick="window.location.href='/myForm.html';">New myBooks</button>
<script src="script.js"></script>
</body>
</html>
const bookArray = [];
function Book(author, title, pages){
// the constructor
this.author = author
this.title = title
this.pages = pages
this.updateTable = function() {
document.getElementById('tableTitle').textContent = this.title;
document.getElementById('tableAuthor').textContent = this.author;
document.getElementById('tablePages').textContent = this.pages;
}
}
function addBookToLibrary(title, author, pages) {
const book = new Book(author, title, pages);
bookArray.push(book);
book.updateTable();
return bookArray;
}
let store1 = new addBookToLibrary("Cat and hat", "Bob", 150);
I have made changes to your HTML and JavaScript code. In the HTML, I added placeholders for displaying the book data in the table by setting the id attributes for the table cells (<td> elements).
In the JavaScript, I added an updateTable method to the Book constructor. This method updates the content of the table cells with the book's title, author, and pages. When you create a new Book and add it to the bookArray, it will automatically update the table with the book's data.
英文:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
</head>
<body>
<h1>My Library Book List</h1>
<p>This is my simple library project using object oriented javascript.</p>
<p id="myBooks"></p>
<br>
<form action="#" method="post">
<label for="title">Title:</label>
<input type="text" id="title" name="title"><br>
<label for="author">Author:</label>
<input type="text" id="author" name="author"><br>
<label for="pages">Pages:</label>
<input type="text" id="pages" name="pages"><br>
<input type="submit" id="submit" value="Submit">
</form>
<script>
document.getElementById("submit").addEventListener
("click", function(event){event.preventDefault()
});
</script>
<br>
<table>
<tr>
<th>title</th>
<th>author</th>
<th>pages</th>
</tr>
<tr>
<td id="title"></td>
<td id="author"></td>
<td id="pages"></td>
</tr>
</table><br>
<button onclick="window.location.href='/myForm.html';">
New myBooks</button>
<script src="script.js"></script>
</body>
</html>
const bookArray = [
];
function Book(author, title, pages){
// the constructor
this.author = author
this.title = title
this.pages = pages
}
function addBookToLibrary(title, author, pages) {
this.title = title
this.author = author
this.pages = pages
this.myArray = []
this.addArray = function(){
this.myArray.push({ title, author, pages });
return this.myArray
}
this.printArray = function() {
var result = "";
for ( let key in this.myArray) {
return this.myArray[key]
result =+ this.myArray[key];
}
return result
}
this.toHTML = function() {
document.getElementById("myBooks").innerHTML = JSON.stringify(this.myArray);
return JSON.stringify(this.myArray)
}
this.updateTable = function() {
document.getElementById('title').innerHTML = this.title;
}
}
let store1 = new addBookToLibrary("Cat and hat", "Bob", 150);
I am expected the function to updateTable to add table data to my html or need a way to statically display each object of book in my table.
Everything I made with this.parameter has been working up to this point. Can i use 'this' reference to display data in my table? I would prefer the table just populate as soons as a object is made.
答案1
得分: 0
你不一定需要在你的HTML中使用 this 来实现这个目的，你可以在你的JS代码中简单地做到这一点。你可以使用以下代码来实现这个目的。我使用了相同的HTML代码，但修改了使用了 this 关键字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
</head>
<body>
<h1>My Library Book List</h1>
<p>This is my simple library project using object-oriented JavaScript.</p>
<p id="myBooks"></p>
<br>
<form action="#" method="post">
<label for="title">Title:</label>
<input type="text" id="title" name="title"><br>
<label for="author">Author:</label>
<input type="text" id="author" name="author"><br>
<label for="pages">Pages:</label>
<input type="text" id="pages" name="pages"><br>
<input type="submit" id="submit" value="Submit">
</form>
<script>
document.getElementById("submit").addEventListener("click", function(event) {
const title = document.getElementById("title").value;
const author = document.getElementById("author").value;
const pages = document.getElementById("pages").value;
const book = addBookToLibrary(title, author, pages);
updateTable();
event.preventDefault();
});
</script>
<br>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Pages</th>
</tr>
<tr>
<td id="title"></td>
<td id="author"></td>
<td id="pages"></td>
</tr>
</table><br>
<button onclick="window.location.href='/myForm.html';">
New myBooks
</button>
<script src="script.js"></script>
</body>
</html>
我已经将你提供的代码翻译成中文，如果需要更多帮助，请告诉我。
英文:
You don't necessarily need to use this in your HTML for this purpose, you can do it simply in your JS code. You can use the following code for this purpose. I have used the same HTML code but modified with the use of this keyword.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const bookArray = [];
function Book(author, title, pages) {
this.author = author;
this.title = title;
this.pages = pages;
}
function addBookToLibrary(title, author, pages) {
const book = new Book(author, title, pages);
bookArray.push(book);
return book;
}
function updateTable() {
const table = document.getElementById("myBooks");
table.innerHTML = "";
for (const book of bookArray) {
const row = document.createElement("tr");
row.innerHTML = `
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.pages}</td>
`;
table.appendChild(row);
}
}
document.getElementById("submit").addEventListener("click", function(event) {
const title = document.getElementById("title").value;
const author = document.getElementById("author").value;
const pages = document.getElementById("pages").value;
const book = addBookToLibrary(title, author, pages);
updateTable();
event.preventDefault();
});
updateTable();
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
</head>
<body>
<h1>My Library Book List</h1>
<p>This is my simple library project using object oriented javascript.</p>
<p id="myBooks"></p>
<br>
<form action="#" method="post">
<label for="title">Title:</label>
<input type="text" id="title" name="title"><br>
<label for="author">Author:</label>
<input type="text" id="author" name="author"><br>
<label for="pages">Pages:</label>
<input type="text" id="pages" name="pages"><br>
<input type="submit" id="submit" value="Submit">
</form>
<script>
document.getElementById("submit").addEventListener
("click", function(event){event.preventDefault()
});
</script>
<br>
<table>
<tr>
<th>title</th>
<th>author</th>
<th>pages</th>
</tr>
<tr>
<td id="title"></td>
<td id="author"></td>
<td id="pages"></td>
</tr>
</table><br>
<button onclick="window.location.href='/myForm.html';">
New myBooks</button>
<script src="script.js"></script>
</body>
</html>
<!-- end snippet -->
updateTable();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论