1. 동적으로 테이블 로드
1. 먼저 HTML에서 테이블의 추가 위치에 대한 ID를 설정합니다.
즉, html의 body 태그 안에 div 태그를 작성하여 이 div 내부에 테이블이 추가됨을 나타냅니다. 다음과 같이
<div id="tdl"><div>
2. 자바스크립트로 테이블을 추가하는 명령문을 작성합니다.
현재 html 파일에 있다면 다음과 같이 <script> 태그 안에 작성됩니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //여기에 추가된 테이블은 필요에 따라 생성할 수 있습니다.
</script>
js 파일을 가져오는 경우 js 파일에 직접 다음 명령문을 작성합니다(test.js라고 가정).
다음과 같이 코드 코드를 복사합니다.
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
그런 다음 자신의 HTML 파일을 소개하십시오.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript" src="test.js"></script>
2. 테이블 행을 동적으로 추가
1. 먼저 HTML에서 테이블 행의 추가 위치에 대한 ID를 설정합니다. 이 위치는 <tbody> 내부에 있어야 합니다. (특별히 정확하지는 않지만 테스트를 통해 얻은 결론입니다. 다른 방법이 있으면 메시지를 남겨주세요.) , 감사합니다), 다음과 같습니다
다음과 같이 코드 코드를 복사합니다.
<테이블>
<머리></머리>
<tfoot><tfoot> //tfoot과 thead는 tbody와 함께 사용되는데, 글을 쓸 때에는 사용하지 않아도 괜찮았습니다.
<tbody id="행"></tbody>
</table>
[/s/S ]*/n
2. 자바스크립트 내용에서는 행과 셀을 먼저 생성한 후 <.tbody>에 다음과 같이 행을 추가해야 합니다.
[암호]
row=document.createElement("tr"); //행 생성
td1=document.createElement("tr"); //셀 생성
td1.appendChild(document.createTextNode("content")); //셀에 콘텐츠 추가
row.appendChild(td1); //행에 셀을 추가합니다.
document.getElementById("rows").append(row); //<tbody>에 행 추가
3. 나의 작은 발견 (다른 사람들은 이미 알고 있을지도 모르지만...)
1. html로 <table id="tdl'></table>을 작성하고 javascript로 document.getElementById("tdl").innerHTML="<tr><td></td>를 작성하여 직접 테스트를 수행했습니다. </ tr>", 이것을 작성한 후 테스트해 보면 html의 테이블 행이 추가되지 않습니다.
2. 위의 테스트를 완료한 후 다시 html로 <table><tr><td id="t'><td><tr></table>을 쓰고 document.getElementById("t in javascript " ).innerHTML="<p>content</p>", 테스트에서 콘텐츠를 추가할 수 있습니다.
3. 생각하기: 위의 두 가지 테스트에서 어떤 결론을 얻을 수 있습니까? 아직 요약하는 방법을 찾지 못했습니다. innerHTML을 통해 직접 추가할 수 있는 태그는 무엇입니까?