Question

我的目标是能够从表单收集数据并在用户输入信息时将其显示在表格中。我正在使用document.getElementbyId来访问每个文本框中的信息，并使用Javascript将该值推出到表中。但是Javascript没有更新表格。有关可以更改的内容的任何建议，以使此代码有效吗？

＆＃13;

var rIndex,
  table = document.getElementById("table");

// check the empty input
function checkEmptyInput() {
  var isEmpty = false,
    name = document.getElementById("name").value,
    id = document.getElementById("id").value,
    qty = document.getElementById("quantity").value,
    category = document.getElementById("category"),
    supplier = document.getElementById("supplier").value;

  if (name === "") {
    alert("Product name field cannot be empty");
    isEmpty = true;
  } else if (id === "") {
    alert("ID field cannot be empty");
    isEmpty = true;
  } else if (qty === "") {
    alert("Quantity field cannot be empty");
    isEmpty = true;
  } else if (supplier === "") {
    alert("Supplier field cannot be empty");
    isEmpty = true;
  }
  return isEmpty;
}

//add a row
function addHtmlTableRow() {
  // get the table by id
  // create a new row and cells
  // get value from input text
  // set the values into row cell's
  var table = document.getElementById("table");
  if (!checkEmptyInput()) {
    var newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),
      cell4 = newRow.insertCell(3),
      cell5 = newRow.insertCell(4),

      name = document.getElementById("name").value,
      id = document.getElementById("id").value,
      qty = document.getElementById("quantity").value,
      category = document.getElementById("category"),
      supplier = document.getElementById("supplier").value;

    cell1.innerHTML = name;
    cell2.innerHTML = id;
    cell3.innerHTML = qty;
    cell4.innerHTML = category;
    cell5.innerHTML = supplier;
    // call the function to set the event to the new row
    selectedRowToInput();
  }
}

// display selected row data into input text
function selectedRowToInput() {

  for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      // get the seected row index
      rIndex = this.rowIndex;
      document.getElementById("name").value = this.cells[0].innerHTML;
      document.getElementById("id").value = this.cells[1].innerHTML;
      document.getElementById("quantity").value = this.cells[2].innerHTML;
      document.getElementById("category").value = this.cells[3].innerHTML;
      document.getElementById("supplier").value = this.cells[4].innerHTML;
    };
  }
}
selectedRowToInput();

＆＃13;

<div class="main">
  <h1>Manage Purchasing</h1>
  <form>
    <ul class="form-style-1">
      <li>
        <label>Product Name </label>
        <input type="text" name="name" id="name" class="field-long" placeholder="Enter product name.." /></li>
      <li>
        <label>Product ID <span class="required">*</span></label>
        <input type="text" name="id" id="id" class="field-long" />
      </li>
      <li>
        <label>Quantity <span class="required">*</span></label>
        <input type="number" name="quantity" id="quantity" class="field-short" />
      </li>
      <li>
        <label>Supplier <span class="required">*</span></label>
        <input type="text" name="supplier" id="supplier" class="long" />
      </li>
      <li>
        <label>Price </label>
        <input type="number" name="price" id="price" class="field-short" />
      </li>
      <li>
        <label>Choose Category</label>
        <select name="field4" class="field-select" name="category" id="category">
          <option value="metal">Metal</option>
          <option value="aluminium">Aluminium</option>
          <option value="Iron">Iron</option>
          <option value="scrap">Scrap Metal</option>
        </select>
      </li>
      <li>
        <label>Product Description </label>
        <textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
      </li>
      <li>
        <p>* Required to add, remove and update the product information on summary.</p>
        <button onclick="addHtmlTableRow();">Add</button>
        <button onclick="editHtmlTbleSelectedRow();">Edit</button>
        <button onclick="removeSelectedRow();">Remove</button>
      </li>
      <li>
      </li>
    </ul>
  </form>
  <div class="summary">
    <h1>Purchasing Summary</h1>
    <table id="table">
      <tr>
        <th>ID</th>
        <th>Quantity</th>
        <th>Supplier</th>
        <th>Price</th>
        <th>Category</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

Answer 1

2个错误：

您需要将type="button"添加到按钮中，否则他们会使用默认type="submit"，这会在点击时执行表单提交（在您的情况下会重新加载页面，使您的页面从零开始新鲜。）
category = document.getElementById("category")需要category = document.getElementById("category").value，因为您需要value中的select，而不是HTMLElement。

var rIndex,
  table = document.getElementById("table");

// check the empty input
function checkEmptyInput() {
  var isEmpty = false,
    name = document.getElementById("name").value,
    id = document.getElementById("id").value,
    qty = document.getElementById("quantity").value,
    category = document.getElementById("category"),
    supplier = document.getElementById("supplier").value;

  if (name === "") {
    alert("Product name field cannot be empty");
    isEmpty = true;
  } else if (id === "") {
    alert("ID field cannot be empty");
    isEmpty = true;
  } else if (qty === "") {
    alert("Quantity field cannot be empty");
    isEmpty = true;
  } else if (supplier === "") {
    alert("Supplier field cannot be empty");
    isEmpty = true;
  }
  return isEmpty;
}

//add a row
function addHtmlTableRow() {
  // get the table by id
  // create a new row and cells
  // get value from input text
  // set the values into row cell's
  var table = document.getElementById("table");
  if (!checkEmptyInput()) {
    var newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),
      cell4 = newRow.insertCell(3),
      cell5 = newRow.insertCell(4),

      name = document.getElementById("name").value,
      id = document.getElementById("id").value,
      qty = document.getElementById("quantity").value,
      category = document.getElementById("category").value,
      supplier = document.getElementById("supplier").value;

    cell1.innerHTML = name;
    cell2.innerHTML = id;
    cell3.innerHTML = qty;
    cell4.innerHTML = category;
    cell5.innerHTML = supplier;
    // call the function to set the event to the new row
    selectedRowToInput();
  }
}

// display selected row data into input text
function selectedRowToInput() {

  for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      // get the seected row index
      rIndex = this.rowIndex;
      document.getElementById("name").value = this.cells[0].innerHTML;
      document.getElementById("id").value = this.cells[1].innerHTML;
      document.getElementById("quantity").value = this.cells[2].innerHTML;
      document.getElementById("category").value = this.cells[3].innerHTML;
      document.getElementById("supplier").value = this.cells[4].innerHTML;
    };
  }
}
selectedRowToInput();

<div class="main">
  <h1>Manage Purchasing</h1>
  <form>
    <ul class="form-style-1">
      <li>
        <label>Product Name </label>
        <input type="text" name="name" id="name" class="field-long" placeholder="Enter product name.." /></li>
      <li>
        <label>Product ID <span class="required">*</span></label>
        <input type="text" name="id" id="id" class="field-long" />
      </li>
      <li>
        <label>Quantity <span class="required">*</span></label>
        <input type="number" name="quantity" id="quantity" class="field-short" />
      </li>
      <li>
        <label>Supplier <span class="required">*</span></label>
        <input type="text" name="supplier" id="supplier" class="long" />
      </li>
      <li>
        <label>Price </label>
        <input type="number" name="price" id="price" class="field-short" />
      </li>
      <li>
        <label>Choose Category</label>
        <select name="field4" class="field-select" name="category" id="category">
          <option value="metal">Metal</option>
          <option value="aluminium">Aluminium</option>
          <option value="Iron">Iron</option>
          <option value="scrap">Scrap Metal</option>
        </select>
      </li>
      <li>
        <label>Product Description </label>
        <textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
      </li>
      <li>
        <p>* Required to add, remove and update the product information on summary.</p>
        <button type="button" onclick="addHtmlTableRow();">Add</button>
        <button type="button" onclick="editHtmlTbleSelectedRow();">Edit</button>
        <button type="button" onclick="removeSelectedRow();">Remove</button>
      </li>
      <li>
      </li>
    </ul>
  </form>
  <div class="summary">
    <h1>Purchasing Summary</h1>
    <table id="table">
      <tr>
        <th>ID</th>
        <th>Quantity</th>
        <th>Supplier</th>
        <th>Price</th>
        <th>Category</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
      </tr>
    </table>
  </div>
</div>

Answer 2

您的代码几乎正确。

如果你使用chrome调试器来逐步执行你的代码，你会注意到你的代码工作正常，但是一旦执行了JavaScript，你的页面就会重新加载，并且添加的内容会丢失。

使用form元素时，请小心操作！默认情况下，它们将充当type="submit"，这会导致页面在onclick处理程序完成后刷新。

这会导致您丢失新内容！

相反，只需将type="button"属性添加到文本按钮即可覆盖其默认的type="submit"行为。

<button onclick="addHtmlTableRow();" type="button">Add</button>
<button onclick="editHtmlTbleSelectedRow();" type="button">Edit</button>
<button onclick="removeSelectedRow();" type="button">Remove</button>

Google Developers：如何单步执行代码
https://developers.google.com/web/tools/chrome-devtools/javascript/step-code

如何使用Javascript更新从表单输入的HTML表格？

2 个答案: