지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > javascript_javascript 기술에서 테이블을 동적으로 로드하고 테이블 행을 동적으로 추가하는 방법

javascript_javascript 기술에서 테이블을 동적으로 로드하고 테이블 행을 동적으로 추가하는 방법

WBOY
풀어 주다： 2016-05-16 17:12:10
원래의
1850명이 탐색했습니다.
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); //

3. 나의 작은 발견(다른 사람들은 이미 알고 있을 수도 있습니다...)

1. html로
2. 위 테스트를 완료한 후 html을

3. 생각하기: 위의 ​​두 가지 테스트에서 어떤 결론을 도출할 수 있지만 아직 innerHTML을 통해 직접 추가할 수 있는 태그는 무엇인지 파악하지 못했습니다.
관련 라벨：
动态加载表格 动态添加表格行
원천：php.cn
이전 기사：asm.js 사용 샘플 코드_기본 지식 다음 기사：동적 menu_jquery를 구현하는 jquery의 예제 코드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Chart.zoom() 호출 후 X축 해제: 단계별 가이드 스크롤 전략을 setScrollStrategy(AxisScrollStrategies.progressive)로 설정했고 로드된 페이지에서 데이터가 매우 빠르게 들어...
에서 2024-04-04 23:40:56
0
1
1339
수정된 제목: 체크박스 선택에 따라 합계 계산 저는 간단한 금융 추적 애플리케이션을 개발 중입니다. 애플리케이션에는 모든 비용 청구서가 포함된 테이블이 있고 테이블 외부에 총 금액이 표시됩니다. JS 또는 A...
에서 2024-04-04 13:45:50
0
1
3465
SQL 테이블(SQL/C++)의 정렬되지 않은 맵에서 누락된 값을 채우는 효율적인 방법 질문 현재 SQL 테이블의 고유 식별자(id)와 그에 연결된 데이터 세트를 순서가 지정되지 않은 맵으로 읽어들이는 시스템이 있습니다. 이러한 데이터 세트는 id1...
에서 2024-04-04 11:47:44
0
1
345
JQuery - 동적 테이블의 즉각적인 계산/변환 나는 동적 HTML 테이블(행을 추가할 수 있음)을 가지고 있으며 "그냥" 리터 단위로 값을 읽고 사용자가 값을 입력할 때 USG로 변환하고 싶...
에서 2024-04-03 12:38:26
0
1
393
PHP 및 MYSQL의 크로스탭 쿼리 저는 MySQL에서 크로스탭 쿼리를 구현하는 방법을 찾고 있었고 이 게시물에서 답을 찾았습니다: MySQL에서 동적 열로 행의 날짜 표시. 쿼리를 시도하고 작동하...
에서 2024-04-02 22:34:20
0
1
414
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿