JavaScript onClick() 디스플레이

Question

문자열이 들어있는 여러 객체로 구성된 배열이 있습니다.

<td><p onclick="theMiddle(this)">The Middle</td> 

td 태그에서 알 수 있듯이이 배열은 테이블의 일부입니다. 문제는 브라우저가 텍스트를 표시 할 새 페이지를 열어야한다는 것입니다. 내 테이블 위의 배열을 p 태그에 표시하려고했습니다.

//JavaScript 
var arrayTheMiddle = new Array (showName.theMiddle, beginingTime.theMiddle, 
network.abc, duration.thirty, rating.general, description.theMiddle, showImage.theMiddle); 

function theMiddle(obj){ 
    for(i=0; i < arrayTheMiddle.length; i++) 
    { 
     document.write(arrayTheMiddle[i] + "<br>"); 
    } 
} 

//HTML File 

<p>Would like the array/function displayed here while the user clicks within the table below (entire table has not been listed)</p> 

<td><p onclick="theMiddle(this)">The Middle</td> 

불행히도 나는 배열에서 구성된 내 함수를 호출하기 위해 id로 get 요소를 사용하는 데 끊임없이 실패하고 있습니다. 나는 모든 종류의 물건을 찾았지만, 솔직히 나는 길을 잃었다. 내 접근 방식이이 시점에서 맞는지 확실하지 않습니다. 나는 이것이 내 머리 위로 불고있는 단순한 것들 중 하나라고 확신한다!

Answer 1

이러한 유형의 작업을 수행하는 데 유용한 여러 가지 JavaScript 프레임 워크 중 하나를 사용하는 것이 좋습니다. Dojo를 선호합니다. jQuery를 많이 좋아합니다.

작동하지 않는 것을보기에 충분한 컨텍스트가 없지만 거의 항상 문서의 HTML에 텍스트를 추가하는 document.write를 피하는 것이 나을 것입니다. 당신은이 경우에 원합니다.

일부 컨테이너 노드의 하위 노드를 만들려고합니다. 일반적으로 마크 업에 내용이없는 컨테이너 노드를 넣으면 <div id='container'>으로 호출 할 수 있습니다.

var container = document.getElementById('container'); 
for (var m : theMiddle) { 
    if (theMiddle.hasOwnProperty(m)) { 
     var txt = document.createTextNode(m); 
     container.appendChild(txt); 
     var br = document.createNode('br'); // I don't approve of br, but that is not relevant here 
     container.appendChild(br); 
    } 
}