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并传递参数。

当txtBookTitle = a || document.getElementById("txtBookTitle").value;有一个值时，此行var 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>

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

1 个答案: