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

时间：2018-04-11 03:50:04

标签： javascript html css bootstrap-4

我试图通过创建一个数组来执行此操作，该数组存储具有与表单输入相关的实例变量的对象，然后将从表单添加的任何内容附加到表中。每当我打电话给这样做时，没有任何事情发生。我不确定我错在哪里。我应该提到这是使用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;
}

4 个答案:

答案 0 :(得分：0)

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

您可以使用原生DOM API执行操作，例如：

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

然后，您可以使用DOM API的所有功能来操纵该行。

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);

您的表现在应该在最后添加一个新行。

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

答案 1 :(得分：0)

您错过了运营商＆＃39; +＆＃39;在您的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>`;

答案 2 :(得分：0)

您还可以按照以下方法之一使用jquery实现您的功能。

＆＃13;
＆＃13; 
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();
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我更新了您的代码，请检查

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>";
  }
  return newTable;
}
<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>

相关问题
最新问题