HTML 태그에 이미지 태그 및 문자열이 채워지지 않습니까?

행/열 표시기를 사용할 때 테이블의 이미지를 업데이트하는 방법을 알아 냈습니다. 다음 학습 단계를 시작하여 두 개의 로컬 어레이에 데이터 세트가있는 샘플 테이블을 채우기 시작했습니다.HTML 태그에 이미지 태그 및 문자열이 채워지지 않습니까?

새 파일 이름 만 바꾸면 괜찮 았지만 일단 JavaScript에서 평가 오류가 발생하면 크기 정보를 변경하고 싶습니다.

내 오류는 HTML '>'태그를 종료하고 배치하는 위치의 조합이 될 듯 -. (''등) possibly- 문자열 문제를 중첩 단일 및 이중 따옴표를 아래

내 예입니다 I 결국 테이블의 값을 바꿀 때 함께 연결되는 상수로이 문자열 중 일부를 설정할 수도 있습니다.

관심사 메모 : 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>

출처

2016-07-10 LaurelS