[HTML/Javascript] 이미 존재하고 있는 테이블 컬럼에 링크 추가하기

이렇게 생긴 테이블이 있다고 치자. 테이블의 모든 행의 첫번째 컬럼에 링크를 추가하려고 한다. HTML 파일 생성 시에 컬럼 값 자체에 링크를 다는 방법 대신, Javascript를 이용하여 HTML 파일이 생성된 후에 A 태그를 덧붙여서 링크를 달아주는 방법을 제시한다.

mytables = document.body.getElementsByTagName("table");
for (i = 0; i < mytables.length; ++i) {
mytable = mytables[i];
mytbody = mytable.getElementsByTagName("tbody")[0];
mytrs = mytbody.getElementsByTagName("tr");
for (j = 1; j < mytrs.length; ++j) {
mytd = mytrs[j].getElementsByTagName("td")[0];
mycell = mytd.firstChild;
var obj = document.createElement("a");
obj.href="http://somewhere.com/query=" + encodeURI(mycell.data);
obj.innerHTML = mycell.data;
mytd.appendChild(obj);
mytd.removeChild(mycell);
}
}

핵심은 특정 조건의 td를 찾아서(첫번째 컬럼만), td의 값을 firstChild로 꺼내고 A 태그를 createElement()로 생성하고 href와 innerHTML을 써 준 다음에 td에 appendChild하는 것이다.

물론 기존의 child는 removeChild()로 제거해야한다.