table rowspan 동적 적용

개발/jquery 2017. 11. 28. 00:37

JQuery

  1. 소스

    • <!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>
  2. 화면


'개발 > jquery' 카테고리의 다른 글

Javascript 테스트  (0) 2018.02.14
Javascript 로 파일 다운로드 구현하기  (0) 2018.01.10
Posted by 감각적신사
,

티스토리툴바