Question

在使用行/列指示符时想出如何更新表中的图像 - 我开始研究下一个学习阶段，用两个本地数组中的数据集填充样本表。

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

我的错误似乎是放置HTML结尾标记'＆gt;'的位置的组合和 - 嵌套单引号和双引号（'和“）的可能字符串问题。

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

对我感兴趣的笔记： 1）我忘了放入单元格结尾“/ td”然后一切似乎都没问题。我想知道这是否会引发一些意想不到的挑战。

2）我想我可以使用我在之前的回答 - 我自己的问题中写的插入单元示例 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>

Answer 1

上面的代码显示了我的工作。我在 function changeImages（）中拆分了标签并将字符串引用为3个字符串，然后将它们连接起来，以弄清楚如何使用文件名和大小调整来替换字符串。

填充HTML表格与图像标签和字符串挑战？

1 个答案: