> 웹 프론트엔드 > JS 튜토리얼 > jQuery_jquery를 기반으로 테이블에서 동일한 텍스트가 있는 인접한 셀을 병합하는 코드

jQuery_jquery를 기반으로 테이블에서 동일한 텍스트가 있는 인접한 셀을 병합하는 코드

WBOY
풀어 주다: 2016-05-16 18:08:39
원래의
984명이 탐색했습니다.

ONE

已经生成的数据表格大致内容如下:

地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 广州 00027 白花油              
广东 广州 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              

需要将前四列具有相同文本的相邻单元格进行自动合并,合并后如下:

地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码
广东 深圳 00028 红花油              
             
             
广州 00027 白花油              
00028 红花油              
深圳              
             
             
             

1. HTML 헤드에 jQuery를 도입합니다

2. 셀 병합 기능 추가

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

/ /함수 설명: 지정된 테이블(테이블 ID는 _w_table_id)과 지정된 열(열 개수는 _w_table_colnum)에서 동일한 텍스트가 있는 인접 셀을 병합
//매개변수 설명: _w_table_id는 ID입니다. 셀을 병합해야 하는 테이블입니다. HTML에 table id="data"가 지정된 경우 이 매개변수는 #data
//매개변수 설명: _w_table_colnum은 셀을 병합해야 하는 열입니다. 왼쪽 첫 번째 열의 1부터 시작하는 숫자입니다.
함수 _W_TABLE_ROWSPAN (_W_TABLE_ID, _W_TABLE_COLNUM) {
_W_TABLE_FIRSTTD = "" "";
_w_table_currenttd = "";
_w_table_spannum = 0
_w_table_id "trd: n번째- 자식( " _w_table_colnum ")");
_w_table_Obj.each(function(i){
if(i==0){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum
_w_table_currenttd.hide(); 제거( ); 🎜> });
}

//함수 설명: 지정된 테이블(테이블 ID는 _w_table_id)과 지정된 행(행 수는 _w_table_rownum)에서 동일한 텍스트를 가진 인접 셀을 병합합니다.
// 매개변수 설명: _w_table_id는 병합해야 하는 테이블 ID입니다. HTML에 table id="data"가 지정된 경우 이 매개변수는 #data
//매개변수 설명: _w_table_rownum은 셀을 병합해야 하는 행입니다. 매개변수 형식은 jQuery의 nth-child 매개변수를 참조하세요.
// 숫자인 경우 왼쪽 첫 번째 줄부터 1부터 센다.
// "even"은 짝수 라인을 의미합니다
// "odd"는 홀수 라인을 의미합니다
// "3n 1"은 라인 수가 1, 4, 7, 10임을 의미합니다.
// 매개변수 참고: _w_table_maxcolnum은 지정된 행의 셀에 해당하는 최대 열 수입니다. 이 값보다 큰 숫자가 있는 셀은 비교 및 ​​병합되지 않습니다.
// 이 매개변수는 비어 있을 수 있습니다. 비어 있으면 지정된 행의 모든 ​​셀이 비교되고 병합됩니다.
함수 _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){
if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;}
_w_table_firsttd = ""; 테이블 _SpanNum = 0;
$(_w_table_id " tr:nth-child(" _w_table_rownum ")").each(function(i){
_w_table_Obj = $(this).children();
_w_table_Obj. 각각 (함수(i){
if(i==0){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else if((_w_table_maxcolnum>0)&&(i> ; _w_table_maxcolnum)){
return "";
}else{
_w_table_currenttd = $(this)
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum ;
_w_table_currenttd.hide();
_w_table_firsttd.attr("colSpan",_w_table_SpanNum)
}else{
_w_table_firsttd =
_w_table_SpanNum = 1;
}
});
})
}


3. 셀




코드 복사


코드는 다음과 같습니다.


인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿