반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- mybatis
- NextJS
- PM2
- nodejs
- yona
- jquery
- FCM
- submit
- security
- Next.js
- Maven
- SpringBoot
- node.js
- config
- pwa
- centos7
- jenkins
- mysql
- Eclipse
- docker
- Java
- javascript
- spring3
- Push
- MariaDB
- MSsql
- ajax
- git
- rocky9
- popup
Archives
- Today
- Total
ふたりで
jsp table merge row span by class 본문
728x90
반응형
SMALL
jstl을 사용 하여 html table을 만들경우 세로 방향으로 같은 항목들을 병합 해주어야 할경우
아래와 같은 스크립트로 해결 할 수 있다.
/* rowspan function */
$.fn.mergeClassRowspan = function (colIdx) {
return this.each(function () {
var that;
$('tr', this).each(function (row) {
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if ($(this).attr('class') == $(that).attr('class')) {
rowspan = $(that).attr("rowspan") || 1;
rowspan = Number(rowspan) + 1;
$(that).attr("rowspan", rowspan);
$(this).hide();
} else {
that = this;
}
that = (that == null) ? this : that;
});
});
});
};
/* 사용 */
$(function(){
$('table tbody').mergeClassRowspan(1);//두번째 td 제로베이스
$('table tbody').mergeClassRowspan(2);//세번째 td
});
그리고 병합이 필요한 각 td테그에 동일한 값으로 class 를 설정 해주면 된다.
<table>
<tbody>
<tr>
<td></td>
<td class="${list.b}"></td>
<td class="${list.b}"></td>
<td></td>
</tr>
</tbody>
</table>
728x90
반응형
LIST
'javascript' 카테고리의 다른 글
임시form을 생성 하여 ajax로 form 전송 하기. (0) | 2022.09.01 |
---|---|
location.replace() 브라우저 history 남기지 않기. (0) | 2022.08.30 |
css, js 캐싱 방지하기...(no cache css js) (0) | 2022.07.07 |
jquery checkbox .prop().trigger() (0) | 2022.05.17 |
layer popup Drag & Drop jquery draggable (0) | 2022.05.17 |
Comments