jQuery 팁: 테이블에 새 행을 동적으로 삽입-JS 튜토리얼-php.cn

jQuery 팁: 테이블에 새 행을 동적으로 삽입

PHPz

풀어 주다： 2024-02-28 11:51:03

원래의

787명이 탐색했습니다.

jQuery 팁: 테이블에 새 행을 동적으로 삽입

제목: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!