1. 질문한 분께서 매우 열심히 탐구하고 있는 것 같아 보기 좋습니다만, 전반적으로 이 코드 전체를 설명해야 질문에 대해 이해할 수 있을 것 같아서, 지면으로 모든 것을 설명하기에는 어려움이 있는 것 같습니다.
간단히 질문에 답을 하겠지만, 혹시 한성대학교 학생이라면 제 연구실로 찾아오면 디버깅하는 방법 등 자세히 설명해 드리겠습니다.

2. 다음 코드는
window.onload = function(){

tds = document.getElementsByTagName("td")

tds[index].style.backgroundColor = 'orchid'

}

웹브라우저에 HTML 파일을 완전히 출력한 시점(load 이벤트 발생)에 함수가 실행되도록 설정하는 것이고, 함수는 0~9까지의 수 중에서 0의 부분만(테이블 셀) 핑크 색으로 칠하는 코드입니다.
이를 위해 index =0인 것이지요.

3. index 는 사용자가 키를 움직일 때마다 값이 계속 바뀌도록 window.onkeydown = function(e){ ... } 에 코딩되었습니다.
이 코든 현재 index 값에 따라 그리고 입력된 키에 따라 index 값을 변경합니다. 만일 오른쪽 키가 눌러 졌다면, case "ArrowRight" :의 코드가 실행됩니다.
이 코드는 단순히 index 값을 1 증가시키면 될 것이지만, 만일 2, 5, 8 처럼 맨 오른쪽 박스를 가리킨다면(이들의 공통점은 3으로 나누었을 때 나머지가 2인 경우) 더 이상 오른쪽으로 갈 수 없습니다. 그런 경우 index 값을 바꾸지 않고 그냥 return 합니다. 그렇지 않은 경우index를 1증가시켜 오른쯕 박스가 선택되도록 합니다.

4. 다음 2 문장은 테이블 셀의 바탕색을 바꾸는 코드입니다.
tds[index].style.backgroundColor = 'orchid'
tds[prevIndex].style.backgroundColor = 'white'

이전에 orchid 색으로 칠해져 있던 셀의 다시 white로 칠하고, 키 입력에 의해 새로 선택된 셀에는 orchid 색으로 칠합니다.
나머지 테이블 셀에 대해서는 아무 변경도 하지 않습니다.

지면 관계상 설명을 더 자세히 하지 못한점 이해 부탁합니다.
구체적인 질문이 있으면 답하기 좋을 것입니다
질문이 있으면 또 올려 주세요.

이상입니다.