javascript - 通过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; 当 a 有一个值时，请考虑该值，点击按钮 a 时其他按钮将是 未定义。在这种情况下，请考虑输入文本中的值

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>