Question

我有一个表单和一个数组，我想将表单中的数据填充到数组中，然后将数据中的数据填充到表中，以便在浏览器中查看数据。我不知道为什么我不能让这成为可能。你能帮我做一下吗？

var monTab = [];

document.getElementById("button1").onclick = function() {
  var id = document.getElementById("id").value;
  var nom = document.getElementById("nom").value;
  var prenom = document.getElementById("prenom").value;
  var age = document.getElementById("age").value;

  monTab[id] = new Personne(id, nom, prenom, age);
  console.log(monTab);

  document.getElementById("id").value = calcId();

  clearinputs();
}

function calcId() {
  var id;
  id = monTab.length + 1;
  return id;
}

function clearinputs() {
  nom.value = "";
  prenom.value = "";
  age.value = "";
}

function Personne(id, nom, prenom, age) {
  this.nomFamille = nom;
  this.prenom = prenom;
  this.age = age;
  this.id = id;
}

function tablegenerator() {
  var contenu;
  for (var i = 0; i < monTab.length; i++) {
    contenu += monTab[i] + "<br>";
    var e = document.createElement('tr');
    var formligne = '<tr><td>' + monTab[i].id + '</td><td>' + monTab[i].nomFamille + '</td><td>' + monTab[i].prenom + '</td><td>' + monTab[i].age + '</td></tr>';
    e.innerHTML = formligne;

    document.getElementsByClassName('myTable')[0].appendChild(e);
  }
}

<body>
  <div id="controls">
    <button>Editer</button>
    <button>Eliminer</button>
  </div>

  <div id="formContainer">
    <form name="formDonnees">
      <fieldset>
        <legend>Vos Coordonnées</legend>

        <label for="nom">Votre Nom</label>
        <input type="text" name="nom" id="nom" />
        <br />

        <label for="prenom">Votre Prenom</label>
        <input type="text" name="prenom" id="prenom" />
        <br />

        <label for="age">Votre Age</label>
        <input type="text" name="age" id="age" />
        <br />

        <input type="hidden" id="id" value="0" />

        <input type="button" name="buttonAjout" id="button1" value="Save" />
        <br />
      </fieldset>
    </form>
  </div>

  <div id="all" class="datagrid">
    <table class="myTable">
      <thead>
        <tr>
          <td>Id</td>
          <td>Nom</td>
          <td>Prenom</td>
          <td>Age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 1

您要将tr元素添加为包含tbody和thead标记的表格的第一个子元素。您需要将tr元素添加到表的tbody元素，以便在表格中显示内容。此外，您正在创建的此tr元素的内部HTML具有另一个tr元素。你需要只有td个元素。

Answer 2

如果您使用id作为基于0的索引，则不要在1中添加calcId()。我更改了Eliminer按钮，点击generate table将填写表格中的所有表单数据。

＆＃13;

var monTab = [];

document.getElementById("button1").onclick = function() {
  var id = document.getElementById("id").value;
  var nom = document.getElementById("nom").value;
  var prenom = document.getElementById("prenom").value;
  var age = document.getElementById("age").value;

  monTab[id] = new Personne(id, nom, prenom, age);
  //console.log(monTab);

  document.getElementById("id").value = calcId();

  clearinputs();
}

function calcId() {
  var id;
  id = monTab.length;
  return id;
}

function clearinputs() {
  nom.value = "";
  prenom.value = "";
  age.value = "";
}

function Personne(id, nom, prenom, age) {
  this.nomFamille = nom;
  this.prenom = prenom;
  this.age = age;
  this.id = id;
}

function tablegenerator() {
  var contenu;
  for (var i = 0; i < monTab.length; i++) {
    contenu += monTab[i] + "<br>";
    var e = document.createElement('tr');
    var formligne = '<tr><td>' + monTab[i].id + '</td><td>' + monTab[i].nomFamille + '</td><td>' + monTab[i].prenom + '</td><td>' + monTab[i].age + '</td></tr>';
    e.innerHTML = formligne;

    document.getElementsByClassName('myTable')[0].appendChild(e);
  }
}

document.getElementById("generate").onclick = function(){
  tablegenerator();
}

＆＃13;

<body>
  <div id="controls">
    <button>Editer</button>
    <button id="generate">Generate Table</button>
  </div>

  <div id="formContainer">
    <form name="formDonnees">
      <fieldset>
        <legend>Vos Coordonnées</legend>

        <label for="nom">Votre Nom</label>
        <input type="text" name="nom" id="nom" />
        <br />

        <label for="prenom">Votre Prenom</label>
        <input type="text" name="prenom" id="prenom" />
        <br />

        <label for="age">Votre Age</label>
        <input type="text" name="age" id="age" />
        <br />

        <input type="hidden" id="id" value="0" />

        <input type="button" name="buttonAjout" id="button1" value="Save" />
        <br />
      </fieldset>
    </form>
  </div>

  <div id="all" class="datagrid">
    <table class="myTable">
      <thead>
        <tr>
          <td>Id</td>
          <td>Nom</td>
          <td>Prenom</td>
          <td>Age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>

＆＃13;

Answer 3

我稍微修改了你的代码以提高效率。此应用程序还采用了我的tableMaker函数。它将一个值数组作为第一个参数，并从中生成一个表行。第二个论点是指定单元格是否为＆＃34;＆＃34;或者＆＃34; th＆＃34;元件。

确定最好做最小的DOM访问，所以我们只做一次。甚至每张表格都没有提交。我们在<fieldset>构造函数的原型中引用了Personne元素。

我使用了许多可能在IE或Safari上运行的箭头功能，因此您可能需要将它们替换为传统的对应物。

好的，让我们看看它是如何运作的。你可以玩它here。

＆＃13;

function Personne() {
  this.id         = this.fieldSet.children[10].value;
  this.nomFamille = this.fieldSet.children[2].value;
  this.prenom     = this.fieldSet.children[5].value;
  this.age        = this.fieldSet.children[8].value;
}

Personne.prototype.fieldSet = document.getElementById("fieldSet");

var rowMaker = (a, t) => a.reduce((p, c, i, a) => p + (i === a.length - 1 ? "<" + t + ">" + c + "</" + t + "></tr>" : "<" + t + ">" + c + "</" + t + ">"), "<tr>");

document.getElementById("button1").onclick = function() {
  var monTab = [],
    personne = new Personne();

  monTab[personne.id] = personne;
  personne.fieldSet.children[10].value = monTab.length;
  personne.fieldSet.children[2].value = "";
  personne.fieldSet.children[5].value = "";
  personne.fieldSet.children[8].value = "";
  monTab = Object.keys(personne).map(k => personne[k]);
  document.getElementsByClassName('myTable')[0].innerHTML += rowMaker(monTab, "td");
};

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

<body>
  <div id="controls">
    <button>Editer</button>
    <button>Eliminer</button>
  </div>

  <div id="formContainer">
    <form name="formDonnees">
      <fieldset id="fieldSet">
        <legend>Vos Coordonnées</legend>

        <label for="nom">Votre Nom</label>
        <input type="text" name="nom" id="nom" />
        <br />

        <label for="prenom">Votre Prenom</label>
        <input type="text" name="prenom" id="prenom" />
        <br />

        <label for="age">Votre Age</label>
        <input type="text" name="age" id="age" />
        <br />

        <input type="hidden" id="id" value="0" />

        <input type="button" name="buttonAjout" id="button1" value="Save" />
        <br />
      </fieldset>
    </form>
  </div>

  <div id="all" class="datagrid">
    <table class="myTable">
      <thead>
        <tr>
          <td>Id</td>
          <td>Nom</td>
          <td>Prenom</td>
          <td>Age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

＆＃13;

从Array填充表

3 个答案: