[javascript] div td 요소를 찾아서 변경하고자 할때 알아두면 좋은 꿀팁

<td data-row-key="0" data-column-name="prod_cd" class="tui-grid-cell tui-grid-cell-has-input tui-grid-cell-editable " style="text-align: left; vertical-align: middle;"> <div class="tui-grid-cell-content">test</div> </td>

이 코드에서 data-row-key="0" data-column-name="prod_cd" 해당되는 값만 변경하고자 하는 코드를 작성하고 한다면?

 

 

아래와 같이 JavaScript를 사용하여 해당 요소의 값을 변경할 수 있습니다.

const tdElement = document.querySelector('td[data-row-key="0"][data-column-name="prod_cd"]');
tdElement.setAttribute('data-row-key', '1');
tdElement.setAttribute('data-column-name', 'new_column_name');
tdElement.querySelector('.tui-grid-cell-content').textContent = 'new_value';

위 코드에서 data-row-key="0"과 data-column-name="prod_cd"인 td 요소를 선택한 다음, 해당 요소의 setAttribute() 메소드를 사용하여 data-row-key와 data-column-name 값을 각각 "1"과 "new_column_name"으로 변경하였습니다. 마지막으로 querySelector() 메소드를 사용하여 .tui-grid-cell-content 클래스를 갖는 자식 요소를 선택한 다음, textContent 프로퍼티를 사용하여 해당 요소의 내용을 "new_value"로 변경하였습니다.

참고로, 위 코드에서 "new_value"는 원하는 값으로 대체하시면 됩니다.