使用图像标签和字符串填充 HTML 表受到挑战？答案

【问题标题】：Populating HTML Table with Images Tag and String Challenged?使用图像标签和字符串填充 HTML 表受到挑战？
【发布时间】：2016-11-12 18:22:31
【问题描述】：

了解了如何在使用行/列指示器时更新表格中的图像 - 我开始着手下一个学习阶段，用两个本地数组中的数据集填充示例表格。

只要我只替换了一个新文件名就可以了，但是一旦我想更改大小信息，我就会遇到 JavaScript 的评估错误。

我的错误似乎是 HTML 结束标记 '>' 的放置位置以及嵌套单引号和双引号（' 和 "）的字符串问题的组合。

以下是我开始工作的示例。我想我最终可能会将其中一些字符串设置为常量，然后在替换表中的值时将它们连接在一起

我感兴趣的笔记： 1）我忘了输入单元格结尾“/td”，但一切似乎都正常。我想知道这是否会在未来带来某种意想不到的挑战。

2）我想我可以使用我在之前的 answer-my-own-question 中写过的插入单元格示例 Basic Table Manipulation: How to change and Insert images in HTML Table using JavaScript?

为了避免在我单击按钮之前出现小空表。但是....我不会真正在真正的应用程序中使用按钮。我会在加载页面时填充表格......但是一次插入一行会更干净，因为它可以更好地解决可变数量的问题（我在表格中的每一行都有一个问题）。如果我将表格设置为总是说... 10 并且只填满 5 个边框将看起来没有吸引力。而且插入会更加干净和程序化！

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

【问题讨论】：

标签： javascript html image html-table populate

【解决方案1】：

上面的代码显示了我的工作。我在 function changeImages() 中将标签和引用字符串分解为 3 个字符串，然后将它们连接起来，以弄清楚如何将替换字符串与文件名和大小组合在一起。

【讨论】：