javascript_javascript 기술에서 테이블을 동적으로 로드하고 테이블 행을 동적으로 추가하는 방법
- WBOY원래의
- 2016-05-16 17:12:101834검색
1. 테이블을 동적으로 로드합니다
1. 먼저 html에서 테이블 추가 위치의 ID를 설정합니다.
즉, body 태그 안에 div 태그를 씁니다. 이 div 안에 추가할 테이블을 나타내는 html입니다. 다음과 같습니다
2. javascript에 테이블을 추가하는 구문을 작성합니다
현재 html 파일을
js 파일이 도입되면 js 파일( test.js라고 가정)에 다음 문을 직접 작성합니다.
document .getElementById("tbl").innerHTML="
"
그런 다음 다시 자신만의 HTML 파일을 소개하세요
2. 동적으로 테이블 행 추가
1. 먼저 html에서 테이블 행의 추가 위치에 대한 ID를 설정합니다. 이 위치는 반드시 제 테스트를 토대로 얻은 결론입니다. 다른 방법이 있으면 메시지를 남겨주세요. 감사합니다) 다음과 같이
[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); //
3. 나의 작은 발견(다른 사람들은 이미 알고 있을 수도 있습니다...)
1. html로
1. 먼저 html에서 테이블 추가 위치의 ID를 설정합니다.
즉, body 태그 안에 div 태그를 씁니다. 이 div 안에 추가할 테이블을 나타내는 html입니다. 다음과 같습니다
2. javascript에 테이블을 추가하는 구문을 작성합니다
현재 html 파일을
js 파일이 도입되면 js 파일( test.js라고 가정)에 다음 문을 직접 작성합니다.
코드 복사 코드는 다음과 같습니다.
document .getElementById("tbl").innerHTML="
| < /tr> |
그런 다음 다시 자신만의 HTML 파일을 소개하세요
코드 복사 코드는 다음과 같습니다.
2. 동적으로 테이블 행 추가
1. 먼저 html에서 테이블 행의 추가 위치에 대한 ID를 설정합니다. 이 위치는 반드시 제 테스트를 토대로 얻은 결론입니다. 다른 방법이 있으면 메시지를 남겨주세요. 감사합니다) 다음과 같이
코드 복사 코드는 다음과 같습니다.
[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); //
3. 나의 작은 발견(다른 사람들은 이미 알고 있을 수도 있습니다...)
1. html로
3. 생각하기: 위의 두 가지 테스트에서 어떤 결론을 도출할 수 있지만 아직 innerHTML을 통해 직접 추가할 수 있는 태그는 무엇인지 파악하지 못했습니다. 성명： 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. 이전 기사：asm.js 사용 샘플 코드_기본 지식다음 기사：asm.js 사용 샘플 코드_기본 지식 |