Question

我是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

Answer 1

正如我已经评论过的那样，你必须循环遍历数组并计算html并进行设置。您的函数app.directive("modulesModal", function(){ return { scope: { label: "@", input: "@", //ngController: "=", <- you don't need to pass in a controller id: "@" }, templateUrl: "/static/book_config/html/modules-modal.html", link: function($scope, $elem, $attrs){ // Non important stuff }, controller: function ($scope) { $.getJSON("/book/modules", function(d) { var moduleDiv = $("#module-div") moduleDiv.jstree({ core: { data: d } }); moduleDiv.on("select_node.jstree", function(e, data) { $scope.selectedModule = data; }); }); } }; });将仅设置最后一个值。

我已经自由更新您的代码。您不应该将数据保存在不同的数组中。最好使用一个具有适当构造对象的数组。

JSFiddle

clearAndShow

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;
}

Answer 2

请尝试更改您的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示例中的数据数组是更好的选择。

Answer 3

你删除了关于作者编号的最后一个问题，但我为你写了一个很大的答案。只为你拥有它：

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

首先，当您点击一个或另一个提交按钮（添加图书或显示图书）时，您必须指定您的表单不提交：

<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;
  ...
}

然后你会遇到像double＆＃34 ;;＆＃34;某些行等。

当您使用＆＃34; forEach ＆＃34;时，您的代码也会出现巨大的错误。请注意，此功能仅在您使用 jQuery 库时才有效！您必须在使用它之前加入它：

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

你做的另一个巨大错误就是你的＆＃34; 显示＆＃34;按钮具有ID＆＃34; 显示＆＃34;而你的messageBox也有这个id。这是禁止的，因为当你想使用具有这个ID的元素时，Javascript不知道哪两个是好的。因此，请在 displayAuthors 中重命名您的按钮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（称为Vanilla JS）的基础知识，这非常酷，因为你必须学习它，但我还给你写了一个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有很多帮助！

我们可以在这个剧本中加入很多东西，但这是一个好的开始，你不觉得吗？

来自法国马赛的干杯！

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

3 个答案:

你删除了关于作者编号的最后一个问题，但我为你写了一个很大的答案。只为你拥有它：