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

Question

Having figured out how to update images in tables when using a row/column indicator - I began working on my next learning stage, populating a sample table with data set in two local arrays. 在弄清楚了如何使用行/列指示符更新表中的图像后，我开始了下一个学习阶段，在示例表中填充了两个局部数组中的数据集。

I was OK as long as I replaced only a new file name, but once I wanted to change the sizing information I had evaluation errors from JavaScript. 只要只替换一个新文件名，我就可以了，但是一旦我想更改大小信息，我就有了JavaScript的评估错误。

My errors seemed to be a combination of where to place the HTML ending tag '>' and - possibly- string issues with nesting single and double quotes (' and ") . 我的错误似乎是将HTML结束标记'>'放置在何处以及-可能是带有单引号和双引号（'和“）嵌套的字符串问题的组合。

Below is my example that I got working. 以下是我正在工作的示例。 I imagine I might eventually set some of these strings into constants that are then concatenated together when replacing the values in the table's 我想我最终可能会将这些字符串中的一些设置为常量，然后在替换表的值时将它们串联在一起

Notes of Interest to Me: 1) I forgot to put in cell ending "/td " and yet it all seems to go OK. 我感兴趣的注意事项：1）我忘了在以“ / td”结尾的单元格中放了，但似乎一切正常。 I wonder if that could cause some kind of unexpected challenge down the road. 我不知道这是否会在将来引起某种意外的挑战。

2)I think I could use the inserting cell example I wrote about in a previous answer-my-own-question Basic Table Manipulation: How to change and Insert images in HTML Table using JavaScript? 2）我想我可以使用我在先前的“我的自己的问题” 基本表操作中写的插入单元格示例：如何使用JavaScript更改和插入HTML表中的图像？

to avoid having the little empty table come up before I click the button. 为了避免在我单击按钮之前出现小的空白表。 However.... I would not really use the buttons in a real app. 但是...我不会真正在实际应用中使用这些按钮。 I would populate the table upon loading the page.... However inserting the rows one at a time, would be much cleaner, as it would give better potential for having a variable number of questions (I have one question per row in the table). 我将在加载页面时填充表格...。但是一次插入一行会更整洁，因为这样可以更好地解决可变数量的问题（我在表格中每行有一个问题）。 If I setup the table to always be say... 10 and only fill up 5 borders are going to look unattractive. 如果我将表格设置为总是说... 10并且仅填满5个边框，将看起来没有吸引力。 And also inserting would just be more clean and programatic! 而且插入将更加干净和程序化！

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

Answer 1

The above code shows what I got working. 上面的代码显示了我正在工作。 I broke up the tags and quoted strings into 3 strings in function changeImages() , then concatenated them, to figure out how to make the replacement string with filename and sizing come together. 我分解了标签，并在函数changeImages（）中将字符串引用为3个字符串，然后将它们串联起来，以弄清楚如何使具有文件名和大小的替换字符串组合在一起。

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

问题描述

1 个解决方案

解决方案1
0 2016-07-10 20:25:14

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

问题描述

1 个解决方案

解决方案1 0 2016-07-10 20:25:14

解决方案1
0 2016-07-10 20:25:14