jquery에서 tr 값을 수정하는 방법

jQuery는 HTML DOM을 쉽게 수정할 수 있게 해주는 인기 있는 JavaScript 라이브러리입니다. 이번 글에서는 jQuery를 이용하여 HTML 테이블의 tr 값을 수정하는 방법을 알아 보겠습니다.

먼저 다음 HTML 테이블 예제를 살펴보겠습니다.

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>
</table>

이제 jQuery를 사용하여 두 번째 행의 값을 수정하겠습니다. 먼저 두 번째 행의 tr 요소를 변수에 저장해야 합니다.

var row = $('table tr:eq(1)');

이렇게 하면 테이블에서 두 번째 tr 요소가 선택되고(참고: jQuery에서 인덱싱은 0부터 시작됩니다) "row" 변수에 저장됩니다.

다음으로 jQuery의 text() 함수를 사용하여 행의 셀 값을 수정할 수 있습니다. 예를 들어, 다음 코드는 두 번째 행의 첫 번째 셀을 업데이트합니다.

row.find('td:eq(0)').text('新值');

이 코드는 find() 함수를 사용하여 두 번째 행의 첫 번째 td 요소(즉, 인덱스가 0인 셀)를 선택하고 해당 텍스트 값을 업데이트합니다. "새 값"으로 설정됩니다.

여러 셀의 값을 동시에 변경해야 하는 경우 다음과 같은 코드를 사용할 수 있습니다.

row.find('td:eq(0)').text('新值1');
row.find('td:eq(1)').text('新值2');

이렇게 하면 두 번째 행의 첫 번째 셀 값과 두 번째 셀 값이 각각 업데이트됩니다.

마지막으로 일부 CSS 스타일을 추가하여 수정된 값을 더욱 돋보이게 할 수 있습니다.

row.find('td:eq(0)').css('background-color', 'yellow');
row.find('td:eq(1)').css('background-color', 'orange');

이렇게 하면 업데이트된 셀을 더 쉽게 볼 수 있습니다.

요약하자면, jQuery를 사용하여 HTML 테이블의 tr 값을 수정하는 것은 매우 간단합니다. text() 함수와 find() 함수를 사용하면 셀의 값을 쉽게 업데이트할 수 있습니다.

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