Drucken Sie Javascript Ergebnisse in Div-Tag

Ich konnte diese Arbeit machen, wie es in <div></div> Tags jetzt hinzufügen möchte ich diese Array-Nummern 0,1,2,3 entfernen und die Daten in <div></div> Tags in HTML, wie können dies geschieht, Wie kann ich es in den div-Tags macht einfügenDrucken Sie Javascript Ergebnisse in Div-Tag

<html> 
<head></head> 
<title>Js test</title> 
<h1>Js Test</h2> 
<body> 
<script type="text/javascript"> 
    var data = new Array(); 
function addElement(){ 
    data.push(document.getElementById('ins_name').value); 
    data.push(document.getElementById('gpa').value); 
    data.push(document.getElementById('da').value); 

    document.getElementById('ins_name').value=''; 
    document.getElementById('gpa').value=''; 
    document.getElementById('da').value=''; 

    display(); 
} 

function display(){ 
    var str = ''; 
    for (i=0; i<data.length;i++) 
    { 
     //str+="<tr><td>" + data[i] + "</td></tr>"; 
     "<tr> 
      <td align=center width=176>Institution </td> 
      <td align=center>GPA</td> 
      <td align=center width=187>Degree Awarded</td> 
     </tr>" 

     "<tr> 
      <td align=center width=176>&nbsp;</td> 
      <td align=center>&nbsp;</td> 
      <td align=center width=187>&nbsp;</td> 
     </tr>" 
    } 

    document.getElementById('display').innerHTML = str; 

} 
</script> 
<form name="jamestown" id="jamestown" method="post" action="samris.php" /> 
Institution : <input type="text" name="ins_name" id="ins_name" /></br> 
GPA : <input type="text" name="gpa" id="gpa" /></br> 
Degree Awarded : <input type="text" name="da" id="da" /></br> 
</p> 
<input type="button" name="btn_test" id="btn_test" value="Button Add Test" onClick='addElement()'; /></br> 
</form> 
<div id=display></div> 
</body> 
</html>

Quelle

2017-06-21 Pharell

'str + = "

" + data[i] + "

";' – user3297291

@ user3297291, Dank funktioniert gut, ich bin jetzt sehr dankbar, nehme ich in < Tabellen setzen wollen, wie ich es tun präsentieren .. – Pharell

Versuchen Sie zuerst, den statischen HTML-Code zu schreiben, der so aussieht, wie Sie es möchten. Definieren Sie dann, welche Teile davon "dynamisch" sind und hinzugefügt/entfernt/geändert werden sollten. Schließlich möchten Sie vielleicht in ein Framework wie react, vue, angular oder knockout schauen, wenn Sie große Teile Ihrer Benutzeroberfläche dynamisch erstellen. Aber in diesem Beispiel sollten Sie in der Lage sein, die meisten Ihrer HTML-Strings ähnlich wie bei meinem ursprünglichen Kommentar zu schreiben. Zum Beispiel: '" "+ data [i] +" "' – user3297291

Da Sie immer mehr Anforderungen in den Kommentaren haben schon länger, der innerHTML += "" Ansatz nicht mehr funktioniert.

Ich rate Ihnen, Elemente mit document.createElement zu erstellen und fügen Sie sie zu Ihrem Dokument mit Node.appendChild.

Es ist nicht wirklich eine Antwort auf die erste Frage, aber ich dachte, es hilft Ihnen mehr als die Konversation in den Kommentaren fortzusetzen. Vielleicht können Sie Ihre Frage bearbeiten, um die zusätzlichen Anforderungen zu berücksichtigen.

Lassen Sie mich wissen, ob es Sachen gibt, die ich noch nicht verstanden habe. Glücklich zu erarbeiten!

var inputIds = ["ins_name", "gpa", "da"]; 
 
var inputElements = inputIds.map(getById); 
 
var tbody = getById("display"); 
 

 
// Create a new row with cells, clear the inputs and add to tbody 
 
function addRow() { 
 
    // Create a row element <tr></tr> 
 
    var row = document.createElement("tr"); 
 
    
 
    inputElements.forEach(function(input) { 
 
    // For each input, create a cell 
 
    var td = document.createElement("td"); 
 
    
 
    // Add the value of the input to the cell 
 
    td.textContent = input.value; 
 
    
 
    // Add the cell to the row 
 
    row.appendChild(td); 
 
    
 
    // Clear the input value 
 
    input.value = ""; 
 
    }); 
 
    
 
    // Add the new row to the table body 
 
    tbody.appendChild(row); 
 
} 
 

 
getById("btn_test").addEventListener("click", addRow); 
 

 
// I added this function because document.getElementById is a bit too long to type and doesnt work with `map` without binding to document 
 
function getById(id) { 
 
    return document.getElementById(id); 
 
}

Institution : <input type="text" name="ins_name" id="ins_name" /><br> 
 
GPA : <input type="text" name="gpa" id="gpa" /><br> 
 
Degree Awarded : <input type="text" name="da" id="da" /><br> 
 

 
<input type="button" id="btn_test" name="btn_test" value="Add Test"/><br> 
 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Institution</th> 
 
     <th>GPA</th> 
 
     <th>Degree</th> 
 
    </tr> 
 
    </thead> 
 
    
 
    <tbody id="display"> 
 
    
 
    </tbody> 
 
</table>

Quelle

2017-06-21 11:22:31 user3297291

Ich habe die Frage bearbeitet, nun schau dir den Code nochmal an. – Pharell

Dies beantwortet auch meine Frage und danke nochmal ... – Pharell

Drucken Sie Javascript Ergebnisse in Div-Tag

Antwort

Verwandte Themen