jquery는 테이블 행을 열로 변환합니다.

프런트엔드 개발에서는 테이블 데이터의 처리와 표시가 관련되는 경우가 많습니다. 더 나은 표시 효과나 데이터 처리 요구 사항을 달성하기 위해 테이블 ​​행을 열로 변환해야 하는 경우가 있습니다. jQuery는 편리한 DOM 조작 및 이벤트 처리 방법을 제공하는 경량 JavaScript 라이브러리로, 테이블 데이터 변환 작업을 간단하고 쉽게 만듭니다. 이 기사에서는 jQuery를 사용하여 테이블 행을 열로 변환하는 방법을 소개합니다.

테이블 행을 열로 변환해야 하는 이유는 무엇인가요?

실제 개발에서는 테이블 데이터를 더 자세히 표시하고 처리해야 할 때가 있습니다. 예를 들어, 테이블에서 한 행은 제품을 나타내고, 각 열은 제품의 속성을 나타냅니다. 모든 제품을 속성에 따라 분류하거나 비교하려면 테이블 행을 열로 변환해야 합니다. 변환된 테이블은 제품 속성이나 속성 간의 차이점을 보다 명확하게 표시할 수 있어 사용자나 개발자가 데이터를 더 쉽게 처리하고 분석할 수 있습니다.

테이블 행을 열로 변환하는 아이디어

테이블 행을 열로 변환하려면 JavaScript/jQuery를 통해 테이블의 데이터를 읽고 이를 새 테이블로 조합해야 합니다. 구체적인 구현 아이디어는 다음과 같습니다.

1. 먼저 테이블의 모든 데이터를 읽고 테이블 데이터의 구조와 각 열의 의미를 이해해야 합니다.
2. 데이터를 처리하고 행 머리글, 열 머리글 및 데이터를 추출합니다.
3. 새 테이블 구조를 조립하고 여기에 처리된 데이터를 추가하세요.

테이블 행을 열로 변환하는 jQuery 구현 단계

이제 테이블 행을 열로 변환하는 작업을 단계별로 구현해 보겠습니다.

1. 테이블 행에서 열로 변환해야 하는 테이블 구조를 준비하세요. 예:

<table id="original">
  <tr>
    <th></th>
    <th>产品A</th>
    <th>产品B</th>
    <th>产品C</th>
  </tr>
  <tr>
    <td>颜色</td>
    <td>红色</td>
    <td>蓝色</td>
    <td>绿色</td>
  </tr>
  <tr>
    <td>尺寸</td>
    <td>大号</td>
    <td>中号</td>
    <td>小号</td>
  </tr>
  <tr>
    <td>售价</td>
    <td>100</td>
    <td>200</td>
    <td>150</td>
  </tr>
</table>

2. 다음 jQuery 코드를 사용하여 원본 테이블의 데이터를 읽고 배열에 저장합니다.

var rows = $('#original tr');
var data = [];

for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  var rowData = [];

  for (var j = 1; j < row.cells.length; j++) {
    rowData.push(row.cells[j].innerText);
  }

  data.push(rowData);
}

3. 다음으로 행 헤더, 열 헤더 및 데이터를 세 가지 다른 배열에 저장합니다. 중앙:

var rowHeaders = [];
var colHeaders = [];
var values = [];

for (var i = 0; i < data.length; i++) {
  rowHeaders.push(rows[i + 1].cells[0].innerText);
}

for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  for (var j = 1; j < row.cells.length; j++) {
    if (i === 1) {
      colHeaders.push(row.cells[j].innerText);
    }
    if (!values[j - 1]) {
      values[j - 1] = [];
    }
    values[j - 1].push(row.cells[j].innerText);
  }
}

이 시점에서 우리는 행, 열 및 값별로 다른 배열에 데이터를 성공적으로 저장했습니다. 다음으로 이러한 배열에서 새 테이블 구조를 만들어야 합니다.

4. 새 테이블 구조를 생성하여 HTML 문서에 삽입:

var newTable = $('<table>');
var headerRow = $('<tr>');
headerRow.append($('<th>').text(''));

for (var i = 0; i < colHeaders.length; i++) {
  headerRow.append($('<th>').text(colHeaders[i]));
}

newTable.append(headerRow);

for (var i = 0; i < rowHeaders.length; i++) {
  var row = $('<tr>');
  row.append($('<td>').text(rowHeaders[i]));

  for (var j = 0; j < values.length; j++) {
    row.append($('<td>').text(values[j][i]));
  }

  newTable.append(row);
}

$('#original').after(newTable);

5. 마지막으로 원본 테이블을 제거해야 합니다.

$('#original').remove();

이 시점에서 테이블 행을 열로 변환하는 작업이 완료되었습니다. . 이제 원본 테이블은 제거되고 변환된 테이블이 HTML 문서에 삽입되었습니다.

요약

이 글에서는 jQuery를 사용하여 테이블 행을 열로 변환하는 방법을 소개합니다. 구체적인 구현은 테이블 데이터를 읽고 데이터를 처리하여 새로운 테이블 구조를 조립하는 것입니다. 이 작업을 통해 테이블의 데이터를 보다 명확하고 직관적으로 표시하고 처리할 수 있습니다. 개발자와 데이터 분석가에게 이는 데이터를 빠르게 처리하고 그 의미를 분석하는 데 중요한 의미를 갖습니다.

위 내용은 jquery는 테이블 행을 열로 변환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!