javascript_javascript 기술에서 테이블을 동적으로 로드하고 테이블 행을 동적으로 추가하는 방법-JS 튜토리얼-php.cn

1. 테이블을 동적으로 로드합니다

1. 먼저 html에서 테이블 추가 위치의 ID를 설정합니다.

즉, body 태그 안에 div 태그를 씁니다. 이 div 안에 추가할 테이블을 나타내는 html입니다. 다음과 같습니다

2. javascript에 테이블을 추가하는 구문을 작성합니다

현재 html 파일을

와 같이 <script> 태그 안에 작성합니다. </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code74836"> <br>&lt ;script type="text/javascript" > <br><br>document.getElementById("tbl").innerHTML="<table><tr><td&gt ;</td></tr></table>" //여기에 추가된 테이블은 필요에 따라 생성할 수 있습니다 <br><br></script>

js 파일이 도입되면 js 파일( test.js라고 가정)에 다음 문을 직접 작성합니다.

코드 복사 코드는 다음과 같습니다.

 
document .getElementById("tbl").innerHTML="< /tr>
" 

그런 다음 다시 자신만의 HTML 파일을 소개하세요

코드 복사 코드는 다음과 같습니다.

2. 동적으로 테이블 행 추가

1. 먼저 html에서 테이블 행의 추가 위치에 대한 ID를 설정합니다. 이 위치는 반드시 제 테스트를 토대로 얻은 결론입니다. 다른 방법이 있으면 메시지를 남겨주세요. 감사합니다) 다음과 같이

코드 복사 코드는 다음과 같습니다.

 
 thead는 tbody와 결합해서 사용하는데, 글을 쓸 때는 사용하지 않아도 괜찮았습니다. 

[sS ]*n 
2. 행과 셀을 먼저 생성하려면 다음과 같이 <.tbody>에 행을 추가합니다
[code] 
row=document.createElement("tr") //행 생성

 td1 =document.createElement("tr"); //셀 생성

td1.appendChild(document.createTextNode("content")); //셀에 콘텐츠 추가

row .appendChild( td1); //행에 셀 추가

document.getElementById("rows").append(row); //