JQuery
소스
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rowspan Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div> <button onclick="set_rowspan()">rowspan</button> <table id="table-rowspan" class="table table-striped table-hover"> <thead> <tr class="info"> <th>컬럼1</th> <th>컬럼2</th> <th>컬럼3</th> </tr> </thead> <tbody> <tr class="gubun" id='0'> <td>0</td> <td>0</td> <td>0</td> </tr> <tr class="gubun" id='1'> <td>1</td> <td>2</td> <td>2</td> </tr> <tr class="gubun" id='2'> <td>1</td> <td>3</td> <td>3</td> </tr> </tbody> </table> </div> <script> $(document).ready(function() { console.log('load') tableRowSpanning("#table-rowspan", 0); }); // 동일한 이름을 가진 열의 값을 통합한다 function table_row_spanning(table, spanning_row_index) { var rowspan_td = false; var rowspan_column_name = false; var rowspan_count = 0; var rows = $('tr', table); $.each(rows, function () { var This = $('td', this)[spanning_row_index]; var text = $(This).text(); if (rowspan_td == false) { rowspan_td = This; rowspan_column_name = text; rowspan_count = 1; } else if (rowspan_column_name != text) { $(rowspan_td).attr('rowSpan', rowspan_count); rowspan_td = This; rowspan_column_name = text; rowspan_count = 1; } else { $(This).remove(); rowspan_count++; } }); // 반복 종료 후 마지막 rowspan 적용 $(rowspan_td).attr('rowSpan', rowspan_count); } </script> </body> </html>
- 화면
'개발 > jquery' 카테고리의 다른 글
| Javascript 테스트 (0) | 2018.02.14 |
|---|---|
| Javascript 로 파일 다운로드 구현하기 (0) | 2018.01.10 |
