자바스크립트로 표를 만드는 방법(자바스크립트로 표를 그리는 2가지 방법)_기본지식

WBOY
풀어 주다: 2016-05-16 17:09:55
원래의
2144명이 탐색했습니다.

1. insertRow() 및 insertCell() 함수

insertRow() 함수는 다음 형식의 매개변수를 사용할 수 있습니다.

insertRow(index): 인덱스는 0부터 시작합니다

이 함수는 첫 번째 행 앞에 새 행을 추가하는 insertRow(0)와 같이 인덱스 행 앞에 새 행을 추가합니다. 기본 insertRow() 함수는 테이블 끝에 새 행을 추가하는 insertRow(-1)과 동일합니다. 일반적으로 사용하는 경우: objTable.insertRow(objTable.rows.length) 테이블 objTable 끝에 새 행을 추가하는 것입니다.

insertCell()과 insertRow의 사용법은 동일하므로 여기서는 논의하지 않습니다.

2. deleteRow() 및 deleteCell() 메소드

deleteRow() 함수는 매개변수를 사용할 수 있으며 형식은 다음과 같습니다. deleteRow(index): 인덱스는 0부터 시작합니다

위의 두 가지 방법과 같은 의미는 지정된 위치의 행과 셀을 삭제하는 것입니다. 전달할 매개변수: Index는 테이블 내 행의 위치로, 다음 방법으로 얻은 후 삭제할 수 있습니다.

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

var row=document.getElementById("Id of row" );
var index=row.rowIndex;//이 속성이 있습니다.
objTable.deleteRow(index);

사용 중 발생한 문제에 대해 말씀드리겠습니다. 테이블의 행을 삭제할 때 특정 행을 삭제하면 테이블의 행 수가 즉시 변경되므로 테이블을 삭제하려면 모든 행을 삭제하세요. , 다음 코드가 잘못되었습니다:

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

functionclearRow(){
objTable = document.getElementById("myTable");

for( var i=1; i {
tblObj.deleteRow(i); }
}

이 코드는 원본 테이블의 본문을 삭제하려고 합니다. 두 가지 문제가 있습니다. 우선, deleteRow(i)일 수 없으며, deleteRow(1)이어야 합니다. 테이블 행을 삭제할 때 테이블의 행 수가 변경되기 때문에 이것이 문제의 핵심입니다. 행 길이가 항상 작아지고 삭제된 행 수가 항상 예상되는 것보다 적습니다. , 테이블을 올바르게 삭제하세요. 코드 줄은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.
functionclearRow(){
objTable = document.getElementById("myTable");
var length= objTable.rows.length
for( var i=1; i {
objTable.deleteRow(i );
    }
}

3. 셀과 행의 속성을 동적으로 설정

A. 다음 형식으로 setAttribute() 메소드를 사용하십시오: setAttribute(속성, 속성 값)

참고: 이 방법은 거의 모든 DOM 개체에 사용할 수 있습니다. 첫 번째 매개변수는 속성 이름(예: border)이고 두 번째 매개변수는 테두리에 설정하려는 값(예: 1)입니다. 🎜>

var objMyTable = document.getElementById("myTable ");

objMyTable.setAttribute("border",1);//테이블의 테두리를 1로 설정


예를 들어 TD의 높이를 설정하려면 먼저 TD 객체를 얻은 다음 setAttribute() 메서드를 사용해야 합니다.

var objCell = document.getElementById("myCell ");

objCell.setAttribute("height",24);//셀 높이를 24로 설정


사용 시 스타일 설정에 문제가 발생했습니다. 대신 setAttribute("className","inputbox2")를 사용해야 합니다. 하하. 문제는 일부 속성이 DW에 있는 것과 일치하지 않는다는 것입니다. 하하, 직접 살펴보겠습니다.

나.직접배치

var objMyTable = document.getElementById("myTable ");

objMyTable.border=1;//테이블 테두리를 1로 설정

이 방법도 누구에게나 적용되는 방법이죠 ㅎㅎ

4. 테이블 만들기

행과 셀의 추가 및 삭제를 이해한 후 테이블을 만들 수 있습니다.

1단계: 동적으로 변경할 수 있는 테이블이 필요합니다. 여기서 말하는 것은 페이지에 이미 존재하는 테이블에 대한 ID: myTable

입니다.

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

var objMyTable = document.getElementById("myTable ");

2단계: 행 및 열 개체 만들기

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

var index = objMyTable.rows.length- 1;
var nextRow = objMyTable.insertRow(index);//추가할 행은 두 번째부터 마지막 ​​행까지 추가됩니다

//셀 상자 번호
var newCellCartonNo = nextRow.insertCell()
var cartonNoName = "IptCartonNo"
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");

그렇습니다. 간단히 행과 열을 만들면 됩니다. 아래에 특정 코드를 게시했습니다. 아주 간단한 예시일 뿐인데 방법은 아마 위와 같을 텐데요, ㅎㅎ 천천히 살펴보도록 하겠습니다~

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

.org/1999/xhtml">
< ;head>

Blu-ray-BlueShine<BR><script 언어="JavaScript"> <br>var Count=false,NO=1; <br>function addRow(){ <br>Count=!Count <br>//행 추가<br> var newTr = testTbl.insertRow(testTbl.rows.length); <br>//두 개의 열 추가<br>var newTd0 = newTr.insertCell() <br>var newTd1 = newTr.insertCell(); newTd2 = newTr.insertCell(); <br>//열 내용 및 속성 설정<br>if(Count){newTr.style.Background="#FFE1FF";} <br>else {newTr.style.Background=" #FFEFD5";} <br>newTd0.innerHTML = '<input type=checkbox id="box4">'; <br>NO <br>newTd1.innerText=" Line "NO" <br>} <br></script> <br><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><br> <br><body> <table width="399" border=0cellspacing="1" id="testTbl" style="font-size:14px;" <P><tr bgcolor ="#FFEFD5"> <br><td width=6%><input type=checkbox id="box1"></td> <br><td >1번째 줄< ; <BR><td> <BR></tr> <BR><레이블> <BR><입력 유형="버튼" "행 삽입" onclick="addRow()" /> <br></body> <br></html><br><br><br> <br><br>5.appendChild() 메소드 </div> <p><strong></strong></p> <p>코드 복사</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="91538" class="copybut" id="copybut91538" onclick="doCopy('code91538')"> 코드는 다음과 같습니다.<u><div class="codebody" id="code91538"> <br><html> <br><머리> <br><title>내 테스트 페이지



<본문>



   
   






<머리>
내 테스트 페이지



<본문>



   
   






원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!