집 >웹 프론트엔드 >JS 튜토리얼 >JQuery를 기반으로 동일한 내용으로 병합된 셀을 구현하는 코드

JQuery를 기반으로 동일한 내용으로 병합된 셀을 구현하는 코드

ringa_lee원래의: 2018-05-11 15:40:331285검색

웹 프론트엔드를 개발하다 보면 페이지를 구성해야 하거나, 같은 셀에 같은 내용을 표시해야 하는 경우가 자주 발생합니다. 일반적인 방법은 테이블 안에 테이블을 중첩하는 것입니다. 메소드를 사용하면 페이지 수가 늘어납니다. 그런데 DIV를 사용하여 작성된 CSS 스타일 수를 제어하기 어려운 경우 어떻게 해야 합니까? 우리는 JQuery를 사용하여 테이블의 동일한 내용을 결합할 것입니다. 다음은 여러분과 공유할 코드입니다.
헤더 JQuery 코드

코드 복사 코드는 다음과 같습니다

<script type="text/javascript"> 
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 
return this.each(function(){ 
var that; 
$(&#39;tr&#39;, this).each(function(row) { 
$(&#39;td:eq(&#39;+colIdx+&#39;)&#39;, this).filter(&#39;:visible&#39;).each(function(col) { 
if (that!=null && $(this).html() == $(that).html()) { 
rowspan = $(that).attr("rowSpan"); 
if (rowspan == undefined) { 
$(that).attr("rowSpan",1); 
rowspan = $(that).attr("rowSpan"); } 
rowspan = Number(rowspan)+1; 
$(that).attr("rowSpan",rowspan); 
$(this).hide(); 
} else { 
that = this; 
} 
}); 
}); 
}); 
} 
$(function() { 
$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值 
$(“#table1″).rowspan(2); 
}); 
</script>

본문에 표 추가

코드 복사 코드는 다음과 같습니다

<body> 
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px"> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
</tr> 

<tr> 
<td>1</td> 
<td>f</td> 
<td>3</td> 
<td>s</td> 
</tr> 
</table> 
</body>

성명：

이전 기사：myFocus Slide3D v1.1.0 사용법 및 download_javascript 기술다음 기사：myFocus Slide3D v1.1.0 사용법 및 download_javascript 기술

JQuery를 기반으로 동일한 내용으로 병합된 셀을 구현하는 코드

관련 기사