[수정 후] html+css로 조회 가능한 표 만들기

이제 테이블 컨텐트를 표시하려면 다음과 같은 요구 사항이 필요합니다.
1. 표가 크고 인터페이스가 작지 않기 때문에div에 넣어야 한다.
2, div에서 scroll 슬라이딩으로 볼 수 있습니다.
3, td의 내용은 한 줄에 유지됩니다.
4,tr를 누르면 어느 줄을 눌렀는지 선택하고 알 수 있습니다.
 
html:

<div id="div1">

　　<table id="table1">

　　　　<tr></tr>

　　</table>

<div>

 
css:

//div     table  scroll 。

#table1 {border-collapse:collapse;height:100;}

#table1 table ,th, td {border: 1px solid black;}

#table1 td{

width:230px;  /*        ，        */

height:25px;line-height:25px;  /*          */

white-space:nowrap;  /*         */

/*overflow:hidden;*/  /*      */

}

#div1 {border: 1px solid red;width:460; height:180px;overflow:scroll;}

 
js:
클릭에 onmousedown 이벤트 처리를 추가합니다.

var trs = document.getElementById('table1').getElementsByTagName('tr');

var choose;  

window.onload = function(){  

 for( var i=0; i<trs.length; i++ ){  

  trs[i].onmousedown = function(){  

   tronmousedown(this);

  }  

 }  

}

function tronmousedown(obj){  

 for( var o=1; o<trs.length; o++ ){  

  if( trs[o] == obj ){  

   trs[o].style.backgroundColor = 'lightblue';

   choose = o;

  }  

  else{  

   trs[o].style.backgroundColor = '';  

  }  

 }  

}

 
같이 소통할 수 있어요.
--------------------------------------!!!
수정된 분할선
블로거daryluo의 조언을 받았습니다. "코드가 조금 안 좋은 점이 있습니다. 모든tr에 이벤트를 추가하는 것입니다. 사실상 테이블 요소에 이벤트를 추가하면 됩니다. 사용자가 td 요소에 이벤트를 클릭하면 이벤트가tr로 거품이 되고 테이블로 이동합니다. 이벤트 처리 함수에서 td 요소를 가져오고 부tr를 찾으면 됩니다.tr에 rowIndex 속성이 있으면 어느 줄을 눌렀는지 알 수 있습니다."
그래서 나는 이벤트를 테이블에 추가해서 핸드폰evevt의 srcElement를 통해 td 요소를 찾고parentNode를 통해tr 요소를 찾았다.다시 이 원소를 단독으로 처리하면 된다.
코드는 다음과 같습니다.
js:

var tb = document.getElementById('table1')

var trs = tb.getElementsByTagName('tr')



window.onload = function(){

  tb.onmousedown = function(evt){

    tronMousedownNew(evt)

  }

}

function tronMousedownNew(evt){

  var ele = evt.srcElement;

  var rowIndex = ele.parentNode.rowIndex;

  choose = rowIndex;

  process(rowIndex);

}



function process(index)

{

  for(var i=0; i< trs.length; i++){

    if(i == index){

      trs[i].style.backgroundColor = 'lightblue';

    }

    else{

      trs[i].style.backgroundColor = '';

    }

  }

}

이제 막 입문을 시작했으니 잘 가르쳐 주셔서 감사합니다.