jquery는 테이블 행 병합을 구현합니다.
- 王林원래의
- 2023-05-14 14:20:38907검색
웹 개발에서 테이블은 여러 데이터 조각을 표시하는 데 사용되는 자주 사용되는 요소 중 하나입니다. 그러나 때로는 더 명확한 정보를 표시하기 위해 여러 행의 데이터를 병합해야 할 때도 있습니다. 이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!