jquery는 테이블 행 병합을 구현합니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery는 테이블 행 병합을 구현합니다.

王林

May 14, 2023 pm 02:20 PM

웹 개발에서 테이블은 여러 데이터 조각을 표시하는 데 사용되는 자주 사용되는 요소 중 하나입니다. 그러나 때로는 더 명확한 정보를 표시하기 위해 여러 행의 데이터를 병합해야 할 때도 있습니다. 이 기사에서는 jQuery를 사용하여 테이블 행을 병합하는 방법을 소개합니다.

1단계: 병합해야 할 열 결정

먼저 병합해야 할 열을 결정해야 합니다. 일반적으로 어떤 열에 동일한 정보가 있는지 고려하고 이를 병합해야 합니다.

예를 들어 아래 표에서는 두 번째 열의 동일한 셀을 병합해야 합니다.

이름	제목	Achievements
Zhang San	수학	90
Li Si	수학 s	80
Zhang San	중국어	85
lee思	English	95

2단계: jQuery 코드 작성

병합해야 하는 열을 사용하여 jQuery 코드 작성을 시작할 수 있습니다. 코드의 아이디어는 인접한 셀을 찾아 내용이 동일하면 병합하는 것입니다.

다음은 구체적인 코드 구현입니다.

function mergeCells(tableID, colList) {
    // 遍历需要合并的列
    for (var colIndex = 0; colIndex < colList.length; colIndex++) {
        var startIndex = 1; // 开始合并的行
        var endIndex = 0;   // 结束合并的行
        var preContent = ''; // 前一个单元格的内容

        // 遍历每一行
        $('#' + tableID + ' tr').each(function(rowIndex) {
            var content = $(this).find('td:eq(' + colList[colIndex] + ')').text(); // 获取当前单元格的内容

            // 判断当前单元格是否需要合并
            if (rowIndex > startIndex && content == preContent) {
                endIndex = rowIndex; // 更新结束合并的行索引
            } else {
                if (endIndex > startIndex) {
                    // 合并单元格
                    $(this).find('td:eq(' + colList[colIndex] + ')').attr('rowspan', endIndex - startIndex + 1);
                    // 隐藏被合并的单元格
                    for (var i = startIndex; i <= endIndex; i++) {
                        $('#' + tableID + ' tr:eq(' + i + ')').find('td:eq(' + colList[colIndex] + ')').hide();
                    }
                }
                // 更新开始合并的行索引和前一个单元格的内容
                startIndex = rowIndex;
                endIndex = rowIndex;
                preContent = content;
            }
        });
    }
}

로그인 후 복사

위 코드는 테이블의 지정된 열을 순회하여 동일한 셀을 찾아 병합합니다. 그 중 tableID는 테이블의 id이고, colList는 병합해야 할 컬럼의 인덱스 목록이다.

3단계: 함수를 호출하여 행 병합

페이지가 로드된 후 mergeCells 함수를 호출하여 테이블 행을 병합할 수 있습니다.

예를 들어 페이지에 다음 코드를 추가합니다.

<body>
    <table id="myTable">
        <tr>
            <th>姓名</th>
            <th>学科</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>数学</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>数学</td>
            <td>80</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>语文</td>
            <td>85</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>语文</td>
            <td>95</td>
        </tr>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            mergeCells('myTable', [1]);
        });
    </script>
</body>

로그인 후 복사

이러한 방식으로 테이블 행을 병합할 수 있습니다.

요약:

이 문서에서는 jQuery를 사용하여 테이블 행을 병합하는 방법을 소개합니다. 인접한 셀을 찾아 병합하고 숨기는 기능을 작성하면 테이블의 표시 효과를 쉽게 얻을 수 있습니다.

물론 행 병합뿐만 아니라 유사한 아이디어를 통해 다른 복잡한 테이블 작업을 구현할 수도 있습니다.

위 내용은 jquery는 테이블 행 병합을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.