jquery로 테이블 내용을 수정하는 방법

프런트 엔드 개발에서 테이블은 데이터를 표시하는 일반적인 방법입니다. 그러나 테이블 내용을 수정해야 할 때 하나씩 수동으로 수정해야 하는 경우가 많아 매우 번거롭고 비효율적입니다. 따라서 jQuery를 사용하여 테이블 내용을 수정하는 것은 매우 좋은 솔루션입니다.

jQuery란 무엇인가요?

jQuery에서 테이블 내용을 수정하는 방법을 이야기하기 전에 먼저 jQuery에 대해 알아보겠습니다. jQuery는 문서 조작을 단순화하고, 이벤트를 처리하고, 애니메이션을 생성하고, AJAX 및 기타 강력한 기능을 처리하기 위한 다양한 방법을 캡슐화하는 뛰어난 JavaScript 라이브러리입니다. jQuery를 사용하면 보다 편리하게 문서를 조작하고 개발 효율성을 높일 수 있습니다.

테이블 내용 수정 작업

이제 jQuery를 사용하여 테이블 내용을 수정하는 방법을 살펴보겠습니다.

먼저 HTML 페이지에 테이블을 만들고 여기에 다음과 같은 일부 콘텐츠를 추가해야 합니다.

<table id="myTable">
   <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>性别</th>
   </tr>
   <tr>
     <td>小明</td>
     <td>20</td>
     <td>男</td>
   </tr>
   <tr>
     <td>小红</td>
     <td>18</td>
     <td>女</td>
   </tr>
</table>

다음으로 테이블의 콘텐츠를 수정하는 jQuery 코드를 작성해야 합니다. 다음 코드는 사용할 수 있는 예입니다.

$(document).ready(function() {
    //获取表格中的单元格
    var $table = $('#myTable');
    var $tdList = $table.find('td');
    
    $tdList.each(function(){
        //获取单元格中的值
        var oldValue = $(this).text();
        //创建input
        var $input = $('<input type="text" class="form-control">');
        $input.val(oldValue);
        //替换
        $(this).html($input);
    });
    
    //监听input的keyup事件，即键盘按键事件
    $('input').live('keyup', function(event){
        //判断按键是否为enter键
        if(event.keyCode == 13) {
            //获取输入框的值
            var newValue = $(this).val();
            //替换单元格中的值
            $(this).parent().text(newValue);
        }
    });
});

코드 분석:

1. $table = $('#myTable');: 테이블 요소를 가져옵니다. $table = $('#myTable');：获取表格元素。
2. $tdList = $table.find('td');：获取表格中所有单元格元素。
3. $tdList.each()：遍历所有单元格，为每个单元格创建一个输入框。
4. $(this).html($input);：将输入框插入单元格中，替换单元格中原有的内容。
5. $('input').live('keyup', function(event){})：监听所有输入框的键盘按键事件。
6. if(event.keyCode == 13)：判断是否按下了回车键。
7. $(this).parent().text(newValue)
$tdList = $table.find('td');: 테이블의 모든 셀 요소를 가져옵니다.

$tdList.each(): 모든 셀을 탐색하고 각 셀에 대한 입력 상자를 만듭니다.

$(this).html($input);: 입력 상자를 셀에 삽입하고 셀의 원래 내용을 바꿉니다.

$('input').live('keyup', function(event){}): 모든 입력 상자의 키보드 키 이벤트를 모니터링합니다.

🎜if(event.keyCode == 13): Enter 키를 눌렀는지 확인합니다. 🎜🎜$(this).parent().text(newValue): 입력 상자의 내용을 셀의 원래 내용으로 바꿉니다. 🎜🎜🎜요약🎜🎜위의 예제 코드는 모든 셀을 순회하여 각 셀에 대한 입력 상자를 동적으로 생성하고 입력 상자에 새로운 데이터를 입력한 후 Enter 키를 누른 후 새 데이터가 원래 데이터를 대체합니다. 이 방법은 테이블 데이터를 하나씩 수정하는 데 적합합니다. 🎜🎜강력한 JavaScript 라이브러리인 jQuery는 테이블 내용을 수정하는 데에도 큰 이점을 제공합니다. jQuery를 사용하면 풍부한 기능을 통해 더욱 효율적이고 편리하게 테이블 내용을 수정할 수 있습니다. 🎜

위 내용은 jquery로 테이블 내용을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!