동적으로 생성 된 테이블에서 요소에 액세스하는 방법은 무엇입니까?

Question

나는 드롭 다운 메뉴에서 필터링 된 데이터 세트로 동적으로 채울 테이블을 가지고 있습니다. 데이터는 인덱스 (selectedIndex)로 필터링됩니다.

var table = document.getElementById("weather"); 
for (var i=0; i<indexSelected.length; i++) { 
    var row=table.insertRow(i+1); 
    var time=row.insertCell(0); 
    var siteName=row.insertCell(1); 
    var region=row.insertCell(2); 
    var sigWeather=row.insertCell(3); 
    var screenTemp=row.insertCell(4); 
    time.innerHTML=weather[indexSelected.length[i]]["time"]; 
    siteName.innerHTML=weather[indexSelected.length[i]]["siteName"]; 
    region.innerHTML=weather[indexSelected.length[i]]["region"]; 
    sigWeather.innerHTML=weather[indexSelected.length[i]]["sigWeather"]; 
    screenTemp.innerHTML=weather[indexSelected.length[i]]["screenTemp"]; 
} 

나는이 테이블의 특정 요소를 검색하려고합니다. 예를 들어, 테이블은 스크린 온도를 나열하고, 나는 이미 최소 화면 온도를 계산하여 테이블에서 검색하려고합니다. 이 작업이 완료되면 배경색을이 셀로 변경해야하지만이 문제를 해결하는 방법을 모릅니다. 나는 약간의 도움에 감사 할 것입니다. 나는 이것을 위해서만 자바 스크립트를 사용할 수 있습니다.

Answer 1

두 가지 방법이 당신이 이벤트를 추가하고 동적으로 테이블을 채우는 코드 줄을 추가하는 방법에 대한 객체를 동적으로 생성하는

Answer 2

어떤 기능을 제공하는 데 도움이

JQuery와 promise 및 done 방법을 확인하십시오 :

var table = document.getElementById("weather"); 
for (var i=0; i<indexSelected.length; i++) { 
    [... snip ...] 

    screenTemp.innerHTML=weather[indexSelected.length[i]]["screenTemp"]; 
    screenTemp.classList.add('screenTemp'); 
} 

그럼 당신은 document.querySelector('.screenTemp')

을 수행하여 찾을 수 있습니다

정보를 입력 한 직후 배경색 변경을 수행 할 수도 있습니다.

var table = document.getElementById("weather"); 
for (var i=0; i<indexSelected.length; i++) { 
    [... snip ...] 

    screenTemp.innerHTML=weather[indexSelected.length[i]]["screenTemp"]; 
    changeBgColor(screenTemp); 
} 

function changeBgColor(screenTempCell) { 
    // do your magic here 
}