jQuery를 사용하여 테이블을 조작하고 값을 할당하는 방법

테이블은 우리가 프론트엔드 개발에서 자주 사용하는 컴포넌트인데, 폼의 데이터에 값을 연산하고 할당해야 하는 경우가 많습니다. 이 기사에서는 jQuery를 사용하여 테이블에 값을 연산하고 할당하는 방법을 소개합니다.

1. jQuery를 사용하여 테이블 조작

1. 테이블 객체 가져오기

테이블을 조작하려면 먼저 테이블 객체를 가져와야 합니다. jQuery에서 선택기를 사용하여 테이블 개체를 가져옵니다. 샘플 코드는 다음과 같습니다.

 var table = $('#tableId');

여기서 tableId는 테이블의 id 값입니다. 테이블을 직접 선택하는 경우 테이블 요소를 직접 사용하세요.

2. 테이블의 행과 열 가져오기

작업을 위해 테이블의 행과 열을 가져오려면 children() 메서드를 사용할 수 있습니다.

 var rows = table.children('tbody').children('tr');//获取表格所有行
 var columns = rows.eq(0).children('td');//获取第一行的所有列

3. 테이블에서 단일 셀 가져오기

The cell은 children( ) 메소드를 사용하여 다음을 얻을 수 있습니다:

 var cell = rows.eq(0).children('td').eq(0);//获取第一行第一列的单元格

4. 테이블 데이터 수정

text() 및 html() 메소드를 사용하여 테이블 데이터 수정

 cell.text(‘new text’);//修改单元格的文本
 cell.html('<input type="text" value="new value">');//修改单元格的html

5. 테이블에서 선택한 행 가져오기

아시다시피 jQuery의 선택기는 강력한 기능이며 다양한 조건에 따라 요소를 선택할 수 있습니다. 선택한 행을 얻으려면 해당 선택기를 사용할 수 있습니다.

2. jQuery를 사용하여 테이블 값 할당

1. 테이블의 셀 값 채우기

val() 메서드를 사용하여 셀 값 할당:

 var inputText = $('#inputText').val();//获取表单input的值
 var cell = rows.eq(0).children('td').eq(0);
 cell.empty().append(inputText);//设置单元格的文本值

2. 행 추가 end of the table

테이블의 마지막 행에서 데이터 행을 추가하려면 추가() 메소드를 사용할 수 있습니다:

 var newRow = $('<tr></tr>');//创建新行
 newRow.append('<td>new value1</td><td>new value2</td>');//向新行中添加单元格并赋值
 table.append(newRow);//将新行添加到表格末尾

3. 테이블 플러그인 사용

1. DataTables

DataTables은 HTML 테이블을 향상시키는 데 사용되는 강력한 jQuery 플러그인입니다. 페이징, 정렬, 검색 기능 등을 지원합니다. DataTables의 도입 자체는 원본 테이블의 스타일을 덮어쓰지 않으므로 테이블은 여전히 ​​정상적으로 표시될 수 있지만 아름다운 스타일이 추가됩니다.

2. BootstrapTable

BootstrapTable은 Bootstrap을 기반으로 개발된 jQuery 테이블 플러그인입니다. 반응형 디자인이 뛰어나고 검색, 정렬, 페이징 및 기타 기능을 지원하며 사용자 정의 템플릿과 테마도 지원합니다.

요약

이상은 jQuery 테이블 연산 및 할당 테이블에 대한 기본 지식이며, 실제 개발에서 테이블 읽기 및 할당도 자주 사용하는 기술 포인트입니다. 동시에 테이블 플러그인을 사용하는 것도 개발 효율성과 UI 효과를 향상시키는 좋은 선택입니다. 이 글이 독자들에게 영감을 주고 도움이 되기를 바랍니다.

위 내용은 jQuery를 사용하여 테이블을 조작하고 값을 할당하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!