從數組填充表
[英]Populating a table from an Array
問題描述
我有一個表單和一個數組，我想將表單中的數據填充到數組，然后將數組中的數據填充到表中，以便在瀏覽器中查看數據。 我不知道為什么我無法做到這一點。 你能幫我做嗎？
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>
3 個解決方案
解決方案1
0 2016-06-18 08:36:06
您正在將tr元素添加為具有tbody和thead標簽的表的第一個子元素。 您需要在表的tbody元素中添加tr元素以在表中顯示內容。 另外，您正在創建的這個tr元素的內部HTML還有另一個tr元素。 您只需要在那里有td元素。
解決方案2
0 2016-06-18 08:59:04
如果您將id用作基於0的索引，則不要在calcId()添加1 。 我generate table單擊generate table更改了Eliminer按鈕，它將在表中填充所有表單數據。
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>
解決方案3
0 2016-06-18 13:48:33
我對您的代碼做了一些修改，以提高效率。 此應用程序還采用了我的tableMaker函數。 它使用值數組作為第一個參數，並根據它們生成一個表行。 第二個參數是指定單元格是“ td”還是“ th”元素。
好的，最好進行最小的DOM訪問，因此我們只做一次。 甚至沒有每個表單都提交。 我們在Personne構造函數的原型中保留對<fieldset>元素的引用。
我使用了很多箭頭功能，這些功能可能無法在IE或Safari上運行，因此您可能需要用常規的箭頭功能替換它們。
好，讓我們看看它是如何工作的。 你可以在這里玩。
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>
Javascript：使用數組中的圖像填充表格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.