Nachdem ich herausgefunden hatte, wie man Bilder in Tabellen aktualisiert, wenn ich einen Zeilen-/Spaltenindikator verwende, begann ich mit der Arbeit an meiner nächsten Lernphase, indem ich eine Beispieltabelle mit Daten in zwei lokalen Arrays füllte.HTML-Tabelle mit Bildern füllen Tag und String herausgefordert?
Ich war OK, solange ich nur einen neuen Dateinamen ersetzte, aber sobald ich die Größeninformationen ändern wollte, hatte ich Bewertungsfehler von JavaScript.
Meine Fehler schien eine Kombination aus zu sein, wo die HTML-End-Tag legen ‚>‘ und -. Possibly- String Probleme mit Verschachtelung einfachen und doppelten Anführungszeichen (‘und„)
Unter meinem Beispiel ist, dass ich Ich denke, ich könnte vielleicht einige dieser Strings in Konstanten setzen, die dann miteinander verkettet werden, wenn die Werte in den Tabellen für mich ersetzt werden: 1) Ich habe vergessen, die Zellenendung "/ td" einzugeben "Und doch scheint alles in Ordnung zu gehen. Ich frage mich, ob das eine unerwartete Herausforderung auf der Straße verursachen könnte.
in einer früheren Antwort-my-own-Frage2) Ich denke, ich das Einfügen von Zellen Beispiel verwenden konnte ich über Basic Table Manipulation: How to change and Insert images in HTML Table using JavaScript?
zu vermeiden, die kleine leere Tabelle mit kommen, bevor ich auf die Schaltfläche klicken schrieb. Allerdings .... würde ich die Tasten in einer echten App nicht wirklich benutzen. Ich würde die Tabelle füllen, wenn ich die Seite lade ... Das Einfügen der Zeilen nacheinander würde jedoch viel sauberer sein, da es ein besseres Potenzial für eine variable Anzahl von Fragen gibt (ich habe eine Frage pro Zeile in der Tabelle)). Wenn ich die Tabelle so aufstelle, dass sie immer gesagt wird ... 10 und nur 5 Grenzen ausfüllen, werden sie unattraktiv aussehen. Und auch Einfügen wäre nur sauberer und programmatischer!
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="QuestionsAnswersTable">
<tr>
<td>
<td>
<td>
</tr>
<tr>
<td>
<td>
<td>
</tr>
<tr>
<td>
<td>
<td>
</tr>
<tr>
<td>
<td>
<td>
</tr>
<tr>
<td>
<td>
<td>
</tr>
</table>
<br>
<p> Using table name, row column numbers, NO ID's</p>
<button onclick="changeImages()">Setup Image Cells - </button>
<button onclick="changeTexts()">Change Text cells</button>
<script>
//
//http://www.w3schools.com/jsref/dom_obj_table.asp
// Various helpful urls
//http://www.codingforums.com/javascript-programming/186129-how-put-images-
table-cells-using-javascript.html
//http://www.w3schools.com/jsref/met_tablerow_insertcell.asp
//https://stackoverflow.com/questions/16978296/insert-image-into-table-cell-
in-javascript
//http://www.w3schools.com/jsref/coll_tr_cells.asp
//option 1
// put each object together from////
// then when I go to populate the table.... hummmm
// var flower1Object = {picture: };
//option 2
// Put the column 0's into photosArray
// Then put the column 1's into commonArray
// This means that the data will not be associated until it appears in the
table
var photosArray = ["img/0.Chilopsis_linearis_arcuata.jpg",
"img/1.Desert_five-spot.jpg",
"img/2.Desert-Globemalllow.jpg",
"img/3.Mojave_Aster-1.jpg",
"img/4.WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg",
"img/5.Cholla2.jpg"
];
var commonArray = [
"Desert Willow",
"Desert Five Spot",
"Desert Globemallow",
"Mojave Aster",
"Hedgehog Cactus or Calico Cactus",
"Cholla or Jumping Cactus"
];
function changeImages()
// swap one image for another, NOT using id for the row/column
{
var testMe = ' <img src="img/0.Chilopsis_linearis_arcuata.jpg" ';
var testMePart2ALT = " alt='Desert Willow' ";
var testMePart3ALT = ' height="550" width="450"style="clear: left" > ';
var testMePart1And2And3ALT = testMe + testMePart2ALT + testMePart3ALT;
document.getElementById("QuestionsAnswersTable").rows[0].cells[0].innerHTML = testMePart1And2And3ALT;
}
function changeTexts()
// swap text for other text, NOT using id for the row/column
{
document.getElementById("QuestionsAnswersTable").rows[0].cells[1].innerHTML
= commonArray[0];
}
</script>
</body>
</html>
