通过JavaScript将默认文本字符串加载到表格

Question

我制作了一个表格，希望用户可以添加书籍（书名，作者，isbn）。

<fieldset>
      <legend>Bokdata</legend>
      <label for="txtBookTitle">Tittel</label>
      <input id="txtBookTitle" type="text" value="">
      <label for="txtBookAuthor">Forfatter</label>
      <input id="txtBookAuthor" type="text" value="">
      <label for="txtBookISBN">ISBN</label>
      <input id="txtBookISBN" type="text" value="">
      <p>
        <button onclick="addBookClick()">Legg til</button>
      </p>
    </fieldset>

这些书将出现在此表中：

  <table border="2">
      <thead>
        <tr>
          <th colspan="3">
            Min bokliste
          </th>
        </tr>
        <tr>
          <th>Tittel</th>
          <th>Forfatter</th>
          <th>ISBN</th>
        </tr>
      </thead>
      <tbody id="tblBodyList">

      </tbody>
      <tfoot id="tblSummary">

      </tfoot>
    </table>

使用输入字段添加书籍是通过以下功能完成的：

    function addBookClick(){
      //Input fra skjemaet
      var txtBookTitle = document.getElementById("txtBookTitle").value;
      var txtBookAuthor  = document.getElementById("txtBookAuthor").value;
      var txtBookISBN = document.getElementById("txtBookISBN").value;

      // Lag html-tabell
      // 0 = tabell 1
      var table = document.getElementsByTagName("table")[0];

      // Legg til ny rad nederst i tabellen. (0) = øverste rad i tabellen.
      var newRow = table.insertRow(table.rows.length);

      // Legg til celler i tabellen
      var cel1 = newRow.insertCell(0);
      var cel2 = newRow.insertCell(1);
      var cel3 = newRow.insertCell(2);

      // Legg til values i cellene
      cel1.innerHTML = txtBookTitle;
      cel2.innerHTML = txtBookAuthor;
      cel3.innerHTML = txtBookISBN;
  }

我正在尝试将一些文本插入到没有html的表格中，而是改为使用javascript。 当然，最简单的方法是将文本写在表格中，但这是学校的作业，我不允许这样做。 允许获得帮助。 我希望我能接近一些东西，但是我真的可以使用一些建议。 我已经尝试了过去两天来解决这个问题：

var txtBookTitle = document.getElementById("txtBookTitle");
var txtBookAuthor  = document.getElementById("txtBookAuthor");
var txtBookISBN = document.getElementById("txtBookISBN");
var tblBodyList = document.getElementById("tblBodyList");

var books = [];

  var defaultBooks =
    "Judo Unleashed,Neil Ohlenkamp,0-07-147534-6\n"+
    "Kodokan Judo,Jigoro Kano,0-87011-681-9\n"+
    "Olympic Judo,Neil Adams,0-7207-1735-3";

var book = {
  title: "txtBookTitle",
  author: "txtBookAuthor",
  ISBN:   "txtBookISBN"
};

function createBook(title, author, ISBN){
      var Book = {};
      Book.title = title;
      Book.author = author;
      Book.ISBN = ISBN;
      books.push(Book);
      return Book
  }

    var judo = "";
    var kodokan = "";
    var olympic = "";

function loadDefaultBooks(){
      judo = createBook("Judo Unleashed", "Neil Ohlenkamp", "0-07-147534-6");
      kodokan = createBook("Kodokan Judo", "Jigoro Kano", "0-87011-681-9");
      olympic = createBook("Olympic Judo" , "Neil Adams" , "0-7207-1735-3");
    listBooks();
  }

Answer 1

在您的情况下，您没有调用loadDefaultBooks 。 此外，功能createBook没有任何意义。 您可以使用相同的功能addBookClick并传递参数。

这行var txtBookTitle = a || document.getElementById("txtBookTitle").value; txtBookTitle = a || document.getElementById("txtBookTitle").value; 当a有一个值考虑该值时，单击按钮a将undefined 。 在这种情况下，请考虑输入文本中的值

 function addBookClick(a, b, c) { //Input fra skjemaet var txtBookTitle = a || document.getElementById("txtBookTitle").value; var txtBookAuthor = b || document.getElementById("txtBookAuthor").value; var txtBookISBN = c || document.getElementById("txtBookISBN").value; // Lag html-tabell // 0 = tabell 1 var table = document.getElementsByTagName("table")[0]; // Legg til ny rad nederst i tabellen. (0) = øverste rad i tabellen. var newRow = table.insertRow(table.rows.length); // Legg til celler i tabellen var cel1 = newRow.insertCell(0); var cel2 = newRow.insertCell(1); var cel3 = newRow.insertCell(2); // Legg til values i cellene cel1.innerHTML = txtBookTitle; cel2.innerHTML = txtBookAuthor; cel3.innerHTML = txtBookISBN; } function loadDefaultBooks() { addBookClick("Judo Unleashed", "Neil Ohlenkamp", "0-07-147534-6"); addBookClick("Kodokan Judo", "Jigoro Kano", "0-87011-681-9"); addBookClick("Olympic Judo", "Neil Adams", "0-7207-1735-3"); } loadDefaultBooks() 

 <fieldset> <legend>Bokdata</legend> <label for="txtBookTitle">Tittel</label> <input id="txtBookTitle" type="text" value=""> <label for="txtBookAuthor">Forfatter</label> <input id="txtBookAuthor" type="text" value=""> <label for="txtBookISBN">ISBN</label> <input id="txtBookISBN" type="text" value=""> <p> <button onclick="addBookClick()">Legg til</button> </p> </fieldset> <table border="2"> <thead> <tr> <th colspan="3"> Min bokliste </th> </tr> <tr> <th>Tittel</th> <th>Forfatter</th> <th>ISBN</th> </tr> </thead> <tbody id="tblBodyList"> </tbody> <tfoot id="tblSummary"> </tfoot> </table>