尝试使用js从表单动态添加到html表？

Question

我试图通过创建一个数组来实现这一点，该数组存储一个带有与表单输入相关的实例变量的对象，然后将表单中添加的任何内容附加到表中。每当我调用函数这样做的时候，什么都不会发生。我不确定我到底错在哪里。我应该提一下，这是使用bootstrap 4完成的

​

var locationList = [];

function locations_addAndSave() {
  var locationForm = document.forms['locations'];
  var city = locationForm.elements['city'].value;
  var opening = locationForm.elements['opening'].value;
  var closing = locationForm.elements['closing'].value;

  var locationData = new Object();
  locationData.city = city;
  locationData.opening = opening;
  locationData.closing = closing;

  locationList.push(locationData);

  var locationHtml = addLocations(locationList);
  var table = document.getElementById("locationTable");
  table.innerHTML = locationHtml;
}

function addLocations(locationList) {

  var newTable = "";
  for (var i = 0; i < locationList.length; i++) {
    newTable += "<tr>";
    newTable += "<td>";
    newTable += locationList[i].city;
    newTable += "</td>";
    newTable += "<td>";
    newTable += locationList[i].opening;
    newTable += "</td>";
    newTable += "<td>";
    newTable += locationList[i].closing;
    newTable += "</td>";
  }
}

<table class="table table-bordered" id="locationTable">
  <thead>
    <tr>
      <th>City</th>
      <th> Opens (AM) </th>
      <th>Closes(PM)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Calgary</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Edmonton</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>ancouver</td>
      <td>11</td>
      <td>10</td>
    </tr>
  </tbody>
</table>


<form action="ignore this" name="locations">
  <div class="form-group">
    <label for="city">City</label>
    <input type="text" name="city" placeholder="Enter city">
  </div>
  <div class="form-group">
    <label for="closing">Opening</label>
    <input type="text" name="opening" placeholder="Enter Opening time 9-11 AM">
  </div>
  <div class="form-group">
    <label for="">Closing</label>
    <input type="text" name="closing" placeholder="Enter Closing time 8-10 PM">
  </div>
  <button type="button" class="btn btn-default" onclick="locations_addAndSave()">Add Location </button>
</form>

​

var locationList = [];

function locations_addAndSave() {
var locationForm = document.forms['locations'];
var city = locationForm.elements['city'].value;
var opening = locationForm.elements['opening'].value;
var closing = locationForm.elements['closing'].value;

var locationData = new Object();
locationData.city = city;
locationData.opening = opening;
locationData.closing = closing;

locationList.push(locationData);

var locationHtml = addLocations(locationList);
var table = document.getElementById("locationTable");
table.appendChild(locationHtml);
}

function addLocations(locationList) {

var newTable = document.createElement('tr');
for (var i = 0; i < locationList.length; i++) {
    var newCell1 = document.createElement('td');
    newCell1.innerText = 'locationlist[i].city';
    newTable.appendChild(newCell1);
    var newCell2 = document.createElement('td');
    newCell2.innerText = 'locationlist[i].opening'
    newTable.appendChild(newCell2);
    var newCell3 = document.createElement('td');
    newCell.innerText = 'locationlist[i].closing';
    newTable.appendChild(newCell3);
}

return newTable;
}

Answer 1

您正在将新行构建为字符串，但我有个想法，如果没有像jQuery这样的中介，您将无法正确地将其附加到DOM中。

相反，您可以使用本机DOM API来执行以下操作：

const newRow = document.createElement('tr');

然后，您就可以使用DOM的所有功能来操作该行了。

newRow.classList.add('some-class');
newRow.style = '...';

const someNewCell = document.createElement('td');
someNewCell.innerText = 'Something!'

然后，您可以将该单元格放入新行

newRow.appendChild(someNewCell);

你有一个实际的元素，其中包含你的行。

然后拿起你的桌子

const yourTable = document.querySelector('#your_table');
yourTable.appendChild(newRow);

现在，您的表应该在末尾添加了一个新行。

当你开始对它们进行排序时，它会变得更具挑战性，但仍然可行

Answer 2

您在js代码中遗漏了运算符'+‘

var locationHtml = addLocations(locationList);
var table = document.getElementById("locationTable");
table.innerHTML += locationHtml; //here

您还可以在此处使用es6 String Interpolation，而不是这些行：

newTable += "<tr>";
newTable += "<td>";
newTable += locationList[i].city;
newTable += "</td>";
newTable += "<td>";
newTable += locationList[i].opening;
newTable += "</td>";
newTable += "<td>";
newTable += locationList[i].closing;
newTable += "</td>";

写下这一行：

newTable += `<tr><td>${locationList[i].city}</td><td>${locationList[i].opening}</td><td>${locationList[i].closing}</td></tr>`;

Answer 3

您还可以遵循以下方法之一来使用jquery实现您的功能。

​

var locationList = [];

$( "#locations" ).submit(function( e ) {
  e.preventDefault();
  
  var city = $("input[name='city']").val();
  var opening = $("input[name='opening']").val();
  var closing = $("input[name='closing']").val();
  
  var html = '<tr><td>'+city+'</td><td>'+opening+'</td><td>'+closing+'</td></tr>';
  
  $('#locationTable tbody').append(html);
  $('#locations')[0].reset();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="locationTable">
  <thead>
    <tr>
      <th>City</th>
      <th> Opens (AM) </th>
      <th>Closes(PM)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Calgary</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Edmonton</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>ancouver</td>
      <td>11</td>
      <td>10</td>
    </tr>
  </tbody>
</table>


<form name="locations" id="locations">
  <div class="form-group">
    <label for="city">City</label>
    <input type="text" name="city" placeholder="Enter city">
  </div>
  <div class="form-group">
    <label for="closing">Opening</label>
    <input type="text" name="opening" placeholder="Enter Opening time 9-11 AM">
  </div>
  <div class="form-group">
    <label for="">Closing</label>
    <input type="text" name="closing" placeholder="Enter Closing time 8-10 PM">
  </div>
  <input type="submit" class="btn btn-default" value="Add Location">
</form>

​