jQuery 팁: 테이블에 새 행을 동적으로 삽입
- PHPz원래의
- 2024-02-28 11:51:03692검색
제목: jQuery 팁: 테이블에 새 행을 동적으로 삽입
웹 개발에서는 테이블에 새 행을 동적으로 삽입해야 하는 경우가 종종 있습니다. 이 기능은 jQuery를 사용하여 매우 간단하게 구현할 수 있습니다. 다음은 jQuery를 사용하여 테이블에 새 행을 동적으로 삽입하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
먼저 jQuery 라이브러리가 CDN 링크나 로컬 파일을 통해 HTML 파일에 도입되었는지 확인하세요. 다음은 테이블과 버튼이 포함된 간단한 HTML 구조입니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态在表格中插入新的行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <tr> <th>Name</th> <th>Age</th> </tr> </table> <button id="addRowBtn">新增行</button> </body> </html>
다음으로 버튼을 클릭할 때 테이블에 새 행을 삽입하는 jQuery 코드를 작성해야 합니다. 코드는 다음과 같습니다.
$(document).ready(function() {
$('#addRowBtn').click(function() {
var name = prompt('请输入姓名：');
var age = prompt('请输入年龄：');
var newRow = '<tr><td>' + name + '</td><td>' + age + '</td></tr>';
$('#myTable').append(newRow);
});
});위 코드에서는 먼저 문서가 로드된 후 버튼의 클릭 이벤트를 바인딩했습니다. 버튼을 클릭하면 각각 이름과 나이를 입력하는 두 개의 프롬프트 상자가 나타납니다. 입력된 값은 HTML 코드와 함께 새 테이블 행에 연결됩니다. 마지막으로 jQuery의 append() 메서드를 사용하여 테이블에 새 행을 삽입합니다.
이제 테이블에 새 행을 동적으로 삽입하는 기능이 완성되었습니다. 위의 HTML 및 jQuery 코드를 복사하여 HTML 파일에 붙여 넣은 후 브라우저에서 열고 버튼을 클릭하여 효과를 테스트할 수 있습니다. 이 예제를 통해 jQuery를 사용하여 테이블에 새 행을 동적으로 삽입하는 방법을 배우는 데 도움이 되기를 바랍니다.
위 내용은 jQuery 팁: 테이블에 새 행을 동적으로 삽입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!