js 자동 생 성 표 기능 예제 간단하게 실현

2445 단어 js자동 생 성 표
본 논문 의 사례 는 js 가 표 자동 생 성 기능 을 간단하게 실현 하 는 것 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
JS 자동 생 성 표 구현
자신의 알고리즘 8 태 행 이기 때문에 가능 한 한 간단 한 방법 으로 효 과 를 실현 할 수 밖 에 없다.
아래 코드 바로 올 리 기

 <table id="table">
 <thead>
  <td>  </td>
  <td>  </td>
  <td>  </td>
 </thead>
 <tbody></tbody>
 </table>


 <style>
 .del{
  cursor: pointer;
  color: blue;
 }
 </style>


<script>
 var tableInfo = [
  {   : '  ',   : 20,   : 160 },
  {   : '  ',   : 18,   : 158 },
  {   : '    ',   : 19,   : 180 },
  {   : '   ',   : 100,   : 150 },
  {   : '   ',   : 100,   : 155 },
  {   : '  ',   : 200,   : 0.5 }
 ]
  var tr = document.createElement('tr');
  var tdName = document.createElement('td');
  var tdAge = document.createElement('td');
  var tdTall = document.createElement('td');
  var del = document.createElement('span');

  //td          
  tdName.innerHTML = tableInfo[i].  ;
  tdAge.innerHTML = tableInfo[i].  ;
  tdTall.innerHTML = tableInfo[i].  ;
  //      
  del.innerHTML = '  ';
  del.className = 'del';
  //      
  createAll(tdName, tdAge, tdTall);

 }
 //  tr>td      
 function createAll(tdName, tdAge, tdTall) {
  table.appendChild(tr);
  tr.appendChild(tdName);
  tr.appendChild(tdAge);
  tr.appendChild(tdTall);
  tr.appendChild(del);
 }
 //           
 var btnDel = document.getElementsByClassName('del');
 for (var i = 0; i < btnDel.length; i++) {
  btnDel[i].onclick = function () {
  //         (tr)   
  this.parentNode.remove();
  }
 }
 </script>

코드 효과:

만약 완벽 하 게 하지 못 한 곳 이 있다 면,많은 지도 바 랍 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 에 관심 이 있 는 독 자 는 본 사이트 의 주 제 를 볼 수 있다.,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기