Заполнение таблицы из массива

У меня есть форма и массив, я хочу заполнить данные из формы массивом и затем заполнить данные из массива в таблицу, чтобы увидеть данные в браузере. Я не знаю, почему я не могу сделать это возможным. Не могли бы вы помочь мне сделать это?Заполнение таблицы из массива

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>

источник

2016-06-18 Rpc.Dominican

Какова точная проблема? – Xufox

Какая ошибка вы получаете в консоли ..? – Hemakumar

Вы добавляете tr элемент в качестве первого ребенка таблицы, которая имеет tbody и thead теги. Вам нужно добавить tr элемент в tbody элемент таблицы для отображения содержимого в таблице. Кроме того, внутренний HTML этого элемента tr, который вы создаете, имеет еще один tr-элемент. Вы должны иметь только td элементов.

источник

2016-06-18 08:36:06

Если вы используете id как индекс 0, тогда не добавляйте 1 в calcId(). Я изменил вашу кнопку Eliminer с нажатием на кнопку «generate table», нажав на нее, все данные вашей формы будут заполнены в таблице.

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

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

источник

2016-06-18 08:59:04

Я слегка измененный код для некоторой эффективности. Также была принята моя функция tableMaker для этого приложения. Он принимает в качестве первого аргумента массив значений и генерирует из них строку таблицы. Второй аргумент - указать, будут ли ячейки элементами «td» или «th».

OK Лучше всего делать минимальный доступ DOM, поэтому мы делаем это только один раз. Не подавайте даже каждую форму. Мы сохраняем ссылку на элемент <fieldset> в прототипе конструктора Personne.

Я использую много функций стрелок, которые, вероятно, не будут работать в IE или Safari, поэтому вам, возможно, придется заменить их на их обычные аналоги.

OK давайте посмотрим, как это работает. Вы можете играть с ним here.

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

<!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>

источник

2016-06-18 13:48:33 Redu

Ваш синтаксис ES6 провалится в некоторых популярных браузерах – mplungjan

@mplungjan Вы правы. Наряду с IE, на данный момент Safari по-прежнему не может обрабатывать стрелки. Тем не менее, я просто хотел показать новейший и современный подход JS. Всегда можно заменить стрелки своими обычными аналогами. Кроме стрелок, остальные должны быть совместимы с ES5. – Redu

Спасибо, ребята, u r awesome ...: D –

Заполнение таблицы из массива

ответ

Смежные вопросы