如何在按下按钮时将数组显示为HTML页的表？
要实现将数组显示为HTML页的表，可以通过以下步骤来完成：
- 创建一个HTML页面，可以使用HTML标记语言和CSS样式来设计表格的外观。
- 在HTML页面中添加一个按钮，可以使用<button>标签，并为其添加一个唯一的ID，例如"btn-display"。
- 在JavaScript中，使用document.getElementById()方法获取按钮元素，并为其添加一个点击事件监听器。
- 在点击事件监听器中，创建一个空的HTML表格元素，可以使用document.createElement()方法创建<table>元素。
- 遍历数组，可以使用for循环或forEach()方法，将数组中的每个元素创建为表格的行和单元格，并将其添加到表格中。
- 将表格添加到HTML页面中的适当位置，可以使用appendChild()方法将表格元素添加到页面中的某个容器元素中。
- 最后，当按钮被点击时，数组将被转换为HTML表格并显示在页面上。
以下是一个示例代码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<title>Array to HTML Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<button id="btn-display">Display Array as Table</button>
<div id="table-container"></div>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）：
// 示例数组
var array = [
{ name: "John", age: 30, city: "New York" },
{ name: "Jane", age: 25, city: "London" },
{ name: "Bob", age: 35, city: "Paris" }
];
// 获取按钮元素
var btnDisplay = document.getElementById("btn-display");
// 添加点击事件监听器
btnDisplay.addEventListener("click", function() {
// 创建表格元素
var table = document.createElement("table");
// 创建表头
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
Object.keys(array[0]).forEach(function(key) {
var th = document.createElement("th");
th.textContent = key;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建表格内容
var tbody = document.createElement("tbody");
array.forEach(function(item) {
var row = document.createElement("tr");
Object.values(item).forEach(function(value) {
var td = document.createElement("td");
td.textContent = value;
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
// 将表格添加到页面中
var tableContainer = document.getElementById("table-container");
tableContainer.innerHTML = "";
tableContainer.appendChild(table);
});这样，当按钮被点击时，数组将被转换为HTML表格并显示在页面上。你可以根据需要修改数组的内容和样式来适应你的实际情况。
请注意，以上示例代码中没有提及任何特定的云计算品牌商或产品。如果你需要在云计算环境中部署和运行这个应用程序，你可以考虑使用腾讯云的云服务器（CVM）来托管你的网站，并使用腾讯云对象存储（COS）来存储HTML页面和JavaScript文件。具体的产品介绍和链接地址可以参考腾讯云的官方文档。
相关·内容
2回答
如何使用json对象内容填充html表
asp.net、json、ajax、html-table
我在一个ajax调用中返回一个列表，成功函数写在下面。我的json有类似{"1"，"ayesha"，"cs"，"Lahore"}的内容。
function ShowData(data) {
var data = data.d;
var html = "";
if (data.length > 0) {
JObject = data;
console.log(JObject);
html
浏览 0提问于2018-11-08得票数 0
2回答
如何以百分比显示HTML表数据
javascript、html
我有一个HTML表，它有一些数字形式的数据，我想把它们转换成百分比。
我的Html表有一个列中有Total的数据，它的数据位于同一行，我试图实现的是将nos转换成百分比
这就是我的表现在正在填充的数据。
片段
var data=[
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate"
浏览 1提问于2018-12-20得票数 0
回答已采纳
2回答
如何用两个Json数据呈现HTML表
javascript、html、json
我必须根据用户的要求从两个JSON数据中呈现一个HTML表，我必须独立地从两个查询中获取数据，所以我得到了两个json数据
几乎85%的工作是为了重新构建data2的一些值而面临的问题。
片段
var data = [{
"outlet": "S0001",
"brandcode": "B0002",
"brandname": "Bakery FG",
"grn": 5810
},
{
"outlet": "
浏览 0提问于2019-03-05得票数 2
回答已采纳
6回答
能否以超链接的形式输出JavaScript数组元素？
javascript、html、arrays、hyperlink
这是我到目前为止所做的代码。我想超链接的网站，以便当数组被输出为一个表的HTML，网站将是可点击的，并链接到各自的网页。
JavaScript：
var beds = new Array(3);
beds[0] = ["Spring Mattress", "http://factorymattresstexas.com/specials/spring-air/"];
beds[1] = ["Rest Lumbar Support", "http://factorymattresstexas.com/specials/beauty
浏览 0提问于2017-08-17得票数 0
回答已采纳
1回答
在调用ajax或放置静态JSON时，我的HTML表中没有显示下拉列表。
javascript、jquery、html
我有一个带有下拉列表的HTML表。我所做的就是点击一个按钮。我正在显示正在下拉的HTML表，但我面临的问题是一个错误，即：
TypeError: t为空；无法访问其"setAttribute“属性
我正在使用Bootstrap4下拉列表.
这是我的代码：
var currentlyClickedOutlet="";
$(document).ready(function() {
$('#button').click(function() {
var data = [{
"amount": 47642
浏览 1提问于2018-12-07得票数 7
回答已采纳
1回答
是否可以将JavaScript数组元素超链接到一个HTML中？
javascript、html、arrays、html-table
这是我到目前为止所做的代码。我想超链接的网站，以便当数组被输出为一个表的HTML，网站将是可点击的，并链接到各自的网页。由于某些原因，type="text/javascript“中的代码与language="JavaScript”中的代码不同，我不知道为什么。如果有人能为language="JavaScript“提供代码，那将是非常感谢的！
HTML：
<table id="table">
<tr id="tbody">
<th>Mattress Type</th>
&l
浏览 2提问于2017-08-17得票数 0
回答已采纳
1回答
如何使用javascript对齐HTML数据
javascript、html、css
我从JSON数据中创建了一个HTML表，并将该JSON在java脚本中格式化为我所需的HTML表。
我陷入困境的地方是，我希望正确地对齐所有来自我的JSON数据的金额。所有的数字，我只想对齐，但不能这样做。
这是我用json编写的javascript代码
var data = [
{
"amount": 476426,
"billdate": "2018-09-01",
"outlet": "JAYANA
浏览 0提问于2018-10-26得票数 2
回答已采纳
1回答
使用JavaScript创建动态大表
javascript、loops
我正在尝试使用JavaScript动态创建一个表。
这里是我正在使用的代码(或者这里是):
function Process(){
CreatTable(['First Name', 'Last Name', 'Email']);
}
function CreatTable(data) {
var checkbox;
var table;
var thead;
var tr;
var th;
var tbody;
tablearea = docum
浏览 3提问于2014-11-22得票数 0
回答已采纳
2回答
无法调用AJAX
javascript、ajax
我正在通过JSON数据创建一些HTML表。我有一个servlet，从这里返回一些数据为JSON格式，并使用javascript操作这个JSON数据。我被困的地方是我的AJAX没有调用。
我有一个表单，其中有3个输入(从日期开始)，直到日期和出口，出口在选择选项中有选项1作为“全部”，还有3个更多的选项。
以下是我的HTML表单：
<form id="formId" method="get">
<div class="container">
<h4&g
浏览 2提问于2018-10-25得票数 0
回答已采纳
3回答
如何使用JavaScript将动态的“`colspan`”放入HTML表中
javascript、jquery、html-table
我有一个HTML，它需要colspan，但我不知道如何实现它
目前我正在使用/来分离一个列的表中的值，但是这在UI上看起来不太好--很难理解是什么
我的代码片段
$(document).ready(function() {
const data = [{
"outlet": "S0001",
"billdate": "2018-08-22",
"amount": 418418,
"billcount": "3471"
}, {
&#
浏览 1提问于2018-12-24得票数 2
回答已采纳
3回答
如何使表单元格在此JavaScript生成的表格中可单击？
javascript、javascript-events
如何在这个JavaScript生成的表格中使表格单元格能够单击？
我认为我在script标记中放置注释的位置就是我需要更改代码的地方！
到目前为止，这段代码是有效的！
function createTable(data) {
var table = document.createElement("table");
table.style.border = "1px solid #ffcc33";
var thead = document.createElement("thead");
thead.style.pad
浏览 1提问于2013-06-06得票数 0
1回答
如何使用javascript在表中插入标记
javascript、html、html-table、insert
我正在设法将html元素标记插入到表结构中。一个html页面中通常有多个表，所以我动态地为每个表创建和插入一个ID，这样可以很好地工作。但是，当我试图将特定的html元素插入到表的不同部分时，我只会得到错误，否则表就永远不会更新。
我是一个技术撰稿人，尝试使用javascript，而我使用的创作工具不允许使用头部和tbody标记，所以当我在文档中的html页面中遇到一个没有这种结构的表时，我需要添加它。之后，我将可视化元素动态地实现到表中，以便更容易地找到信息。
这一切都很好的表，已经有头结构，所以我需要一种方法，以使这个结构的表，没有它。
以下是我所要做的事情的前后视图：
在此之前：
浏览 2提问于2021-08-30得票数 0
回答已采纳
1回答
如何使用javascript在PivotTable中插入:nth-child(x)和:之前？
javascript、html、css
所有东西的问题是，表中的数据来自数据库，通过API，所以表是动态创建的，因此我不能使用CSS来实现这一点，记住下面的代码是以数组的形式记录表中的数据。
我想将下面的css转换为Javascript，因为我的表格是动态的，无法知道tr和td的数量……
const DATA = {
"Informacoes": {
"qtRows": 3,
"qtCols": 6,
"Cabecalho": ["Id", "Encont
浏览 57提问于2018-10-06得票数 0
1回答
从SQL查询表结果创建Textarea的DOM
javascript、jquery、dom、sqlite
我得到了创建表的DOM对象，我想要一个新的函数/DOM，它从表结果中创建一个Textarea，列名为AsText(几何)(即fieldNamei =“AsText(几何))。这是SQLite3查询。
下面是创建表格html的DOM
function displayWKTqueryVCF(bcoResults, parameters){
//debug('displaying scores');
/*
* the data array has multiple results from multiple BCF calls.
* the fir
浏览 3提问于2011-06-18得票数 0
回答已采纳
2回答
使用JSON数据创建HTML表时面临的问题
javascript、jquery、json、html-table
在使用JSON数据创建HTML表时，我遇到了一些问题，因为我对此并不熟悉，因此无法正确地编写逻辑。
我有一个json数据，我必须从它创建一个动态的html表。表的设计并不复杂，这就是为什么我无法用正确的数据填充HTML表的原因。
在我的JSON中，我试图创建：
但无法做到。
我做过像这样的事情
var data = [{
"billdate": "2018-08-01",
"outlet": "S0001",
"amount": 291589,
"cash
浏览 7提问于2019-02-27得票数 5
回答已采纳
2回答
如何在我的HTML表中提供动态的can
javascript、html-table
我正在用JSON数据创建一个Html表，我已经完成了一半，我已经创建了这个表，但是在一个地方遇到了问题
我想做的是:-
我想将两列放入一个标题中，即在一个标题中使用colspan两列
我到目前为止所取得的成就
我将两个值放在带有/分隔符的侧列中，这在UI上看起来不太好
片段
$(document).ready(function() {
const data = [{
"outlet": "S0001",
"billdate": "2018-08-22",
"amoun
浏览 2提问于2018-12-24得票数 2
回答已采纳
1回答
如何使HTML表第一列修复
javascript、jquery、css、html-table
我有一个仅使用CSS或JS进行第一列修复的HTML表，我已经使用JavaScript修复了我的表的头，但是我在修复表的第一列时遇到了问题。
JS代码，我正在使用它来修复我的头
document.getElementById("commonDvScroll").addEventListener("scroll",function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead"
浏览 0提问于2019-05-06得票数 0
回答已采纳
3回答
如何使用JSON数据创建动态表？
javascript、json、html-table
在JSON数据的帮助下，我创建了一个HTML表，我只使用javascript创建了我的表，而且我的表是动态的
我有一个json数组，其中有几个有数据的对象。
在这个JSON中，我试图创建一个HTML表
我已经成功地创建了头部，但是在创建身体部分时遇到了问题。
我正在尝试创建这样的桌子：
平均值就像所有被取消的票据除以no.of插座的总和，这就是为什么我要计算出口的长度，并将它存储在一个全局变量中。
由于我的代码有点长，我已经注释了我的所有行，我正在做什么，在哪里面对什么问题
在身体部分，我不知道如何填充与出口有关的已取消的账单数据，对于重复的账单也是如此。
浏览 3提问于2019-02-27得票数 3
回答已采纳
2回答
给出错误结果百分比的计算
javascript、html
我有一个HTML表，它有一些数据。我正在将这些数据转换为百分比，以将它们填充到UI上的HTML中。
我到目前为止所做的事：
使用基本公式计算百分比，即(no./total)100
它给了我标题行的正确结果，也就是一行。
对于第二行，我使用了相同的公式，但是得到了一些错误的结果。
片段
const data = [
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
浏览 0提问于2018-12-20得票数 5
回答已采纳
1回答
jquery显示正确的表序列
javascript、html、jquery、json、html-table
? 我在javascript中遇到了一个问题，我想在表格中显示一个列Success/Fail，但是他们在表格中显示了两列。它们不会在Success/Fail列中显示正确的值。 我该怎么办？有没有人帮我？ var responseList = [{
"summary": {
"template_name": "test",
"success": "2",
"fa
浏览 9提问于2020-07-17得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
