반응형
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 |
Tags
- Next.js
- PM2
- git
- node.js
- Eclipse
- popup
- centos7
- Java
- Maven
- mybatis
- config
- Push
- nodejs
- NextJS
- FCM
- Tomcat
- security
- rocky9
- MariaDB
- javascript
- docker
- SpringBoot
- yona
- pwa
- ajax
- mysql
- MSsql
- jquery
- spring3
- jenkins
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