如何使用HTML表显示存储在数组中的用户输入数据

How to display user input data stored in array, using HTML table

本文关键字：用户 输入 数据 数组 HTML 何使用 显示 存储      更新时间：2023-09-26

我对html/javascript有点陌生。我想将用户输入值存储在数组中（已经完成了这一部分），并将其显示到HTML表中（我一直停留在这个位置）。当用户按下按钮时，表格将显示在底部。

这是我迄今为止的代码：HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <form>
    <h1>Please enter data</h1>
    <input id="title" type="text" placeholder="Title" />
    <input id="name" type="text" placeholder="Name" />
    <input id="tickets" type="text" placeholder="Tickets" />
    <input type="button" value="Save/Show" onclick="insert()" />
  </form>
  <div id="display"></div>
</body>
</html>

这是我的Javascript代码：

var titles  = [];
var names   = [];
var tickets = [];
var titleInput  = document.getElementById("title");
var nameInput   = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
var messageBox  = document.getElementById("display");
function insert ( ) {
 titles.push( titleInput.value );
 names.push( nameInput.value );
 tickets.push( ticketInput.value );
 clearAndShow();
}
function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";
  // Show our output
  messageBox.innerHTML = "";
  messageBox.innerHTML += "<tr>Titles</tr>" + titles.join(" ") + "<td></td>";
  messageBox.innerHTML += "<tr>Name</tr> <td>" + names.join(" ") + "</td>";
  messageBox.innerHTML += "<tr>tickets</tr> <td>" + tickets.join(" ")+ "</td>";
}

我无法将数组显示到表中。我是Javascript/HTML的新手，如果有任何帮助，我将不胜感激D

正如我已经评论过的，您必须在数组上循环并计算html并设置它。您的函数clearAndShow将只设置最后一个值。

我冒昧地更新了你的代码。不应将数据保存在不同的数组中。最好使用一个具有适当构造对象的数组。

JSFiddle

var data = [];
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
var messageBox = document.getElementById("display");
function insert() {
  var title, name, ticket;
  title = titleInput.value;
  name = nameInput.value;
  ticket = ticketInput.value;
  data.push({
    title: title,
    name: name,
    ticket: ticket
  });
  clearAndShow();
}
function clearAndShow() {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";
  messageBox.innerHTML = computeHTML();
}
function computeHTML() {
  var html = "<table>";
  console.log(data)
  data.forEach(function(item) {
    html += "<tr>";
    html += "<td>" + item.title + "</td>"
    html += "<td>" + item.name + "</td>"
    html += "<td>" + item.ticket + "</td>"
    html += "</tr>";
  });
  html += "</table>"
  return html;
}
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<head>
  <script class="jsbin" src=""></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
  <body>
    <form>
      <h1>Please enter data</h1>
      <input id="title" type="text" placeholder="Title" />
      <input id="name" type="text" placeholder="Name" />
      <input id="tickets" type="text" placeholder="Tickets" />
      <input type="button" value="Save/Show" onclick="insert()" />
    </form>
    <div id="display"></div>
  </body>

请尝试更改您的js代码，如下所示，不是最优雅的，而是一个开始：

function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";
  // Show our output
  messageBox.innerHTML = "";
  messageBox.innerHTML += "<tr>";
  messageBox.innerHTML += "<td>Titles</td>";
  messageBox.innerHTML += "<td>Name</td>";
  messageBox.innerHTML += "<td>Tickets</td>";
  messageBox.innerHTML += "</tr>";
  for(i = 0; i <= titles.length - 1; i++)
  {
    messageBox.innerHTML += "<tr>";
    messageBox.innerHTML += "<td>" + titles[i]+ "</td>";
    messageBox.innerHTML += "<td>" + names[i] + "</td>";
    messageBox.innerHTML += "<td>" + tickets[i]+ "</td>";
    messageBox.innerHTML += "</tr>";
  }
}

和你的显示html像这样：

<table id="display"></table>

看看这边的小提琴https://jsfiddle.net/gvanderberg/cwmzyjf4/

Rajesh示例中的数据数组是更好的选择。

您删除了关于作者编号的最后一个问题，但我为它写了一个重要的答案。只是为了让您拥有它：

哇，伙计，你的逻辑有几个问题。

首先，当你点击一个或其他提交按钮（添加书籍或显示书籍）时，你必须在表单中指定不提交：

<form onsubmit="return false;">

其次，您必须将编号var定义为0，并在您想为书籍分配编号时使用它：

var numbering = 0;

然后，在您的addBook函数中，您必须使用全局编号变量来设置no变量：

function addBook() {
  numbering++; // increments the number for the books (1, 2, 3, etc)
  var no, book, author;
  book = bookInput.value;
  author = nameInput.value;
  no = numbering;
  ...
}

然后你会有各种各样的错误，比如在某些行上双"；"。

当您使用"forEach"时，您的代码也会出现巨大的错误。请注意，此函数仅在使用jQuery库时有效！在使用之前，您必须将其包括在内：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

您所犯的另一个重大错误是，您的"Display"按钮的id为"DisplayisplayAuthors:中重命名您的按钮id

<input type="submit" id="displayAuthors" value="Display" onclick="displayBook()" />

现在，你还可以做的是，每次添加这样的新书时，调用displayBooks函数：

function addBook() {
  numbering++;
  var no, book, author;
  book = bookInput.value;
  author = nameInput.value;
  no = numbering;
  data.push({
    book: book,
    author: author,
    no: no
  });
  displayBook();
}

所以我在CodePen上做了所有这些事情：https://codepen.io/liorchamla/pen/JMpoxM

JQuery解决方案

在这里，您使用了Javascript（称为VanillaJS）的基础知识，这很酷，因为您必须学习它，但我也给您写了一个CodePen，向您展示如何使用jQuery做到这一点：-）

它在这里：http://codepen.io/liorchamla/pen/oxwNwd

基本上，javascript改为：

$(document).ready(function(){
  var data = []; // data is an empty array
  // binding the addBook button with the action :
  $('#addBook').on('click', function(){
    var book = {
      title: $('#bookname').val(),
      author: $('#authors').val(),
      // note we won't use a numbering variable
    };
    data.push(book);
    // let's automaticly trigger the display button ? 
    $('#displayBooks').trigger('click');
  });
  // binding the displayBooks button with the action :
  $('#displayBooks').on('click', function(){
    $('#display').html(computeHTML());
  });
  function computeHTML(){
    // creating the table
    html = "<table><tr><th>No</th><th>Book</th><th>Author</th></tr>";
    // for each book in the data array, we take the element (book) and the index (number)
    data.forEach(function(element, index){
      // building the table row, note that index starts at 0, so we increment it to have a start at 1 if it is 0, 2 if it is 1 etc.
      html += "<tr><td>" + parseInt(index++) + "</td><td>" + element.title + "</td><td>" + element.author + "</td></tr>";
    })
    html += "</table>";
    // returning the table
    return html;
  }
})

您可能会发现它很复杂，但随着时间的推移，您会发现jQuery有很大帮助！

在这个剧本中，我们可以做很多事情，但这是一个很好的开始，你不认为吗？

法国马赛干杯！

相关文章：