给我一个管理新闻的前端代码
以下是一个简单的管理新闻的前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理新闻</title>
</head>
<body>
<h1>管理新闻</h1>
<form>
<label for="title">标题：</label>
<input type="text" id="title" name="title"><br><br>
<label for="author">作者：</label>
<input type="text" id="author" name="author"><br><br>
<label for="content">内容：</label><br>
<textarea id="content" name="content" rows="10" cols="50"></textarea><br><br>
<button type="submit" onclick="submitNews()">提交</button>
</form>
<br>
<table>
<thead>
<tr>
<th>标题</th>
<th>作者</th>
<th>内容</th>
</tr>
</thead>
<tbody id="newsList">
</tbody>
</table>
<script>
var newsList = [];
function submitNews() {
var title = document.getElementById("title").value;
var author = document.getElementById("author").value;
var content = document.getElementById("content").value;
var news = {
title: title,
author: author,
content: content
};
newsList.push(news);
renderNewsList();
}
function renderNewsList() {
var newsTable = document.getElementById("newsList");
newsTable.innerHTML = "";
for (var i = 0; i < newsList.length; i++) {
var news = newsList[i];
var row = newsTable.insertRow(i);
var titleCell = row.insertCell(0);
titleCell.innerHTML = news.title;
var authorCell = row.insertCell(1);
authorCell.innerHTML = news.author;
var contentCell = row.insertCell(2);
contentCell.innerHTML = news.content;
}
}
</script>
</body>
</html>
该代码包含一个表单用于添加新闻，以及一个表格用于展示已添加的新闻。表格中的每一行展示一条新闻的标题、作者和内容。新闻以 JavaScript 对象的形式存储在数组中，并通过循环渲染到表格中。当提交按钮被点击时，会将表单中的数据添加到新闻数组中并重新渲染表格
原文地址: https://www.cveoy.top/t/topic/cQLT 著作权归作者所有。请勿转载和采集!