jquery menukar baris jadual kepada lajur

Dalam pembangunan bahagian hadapan, pemprosesan dan paparan data jadual sering terlibat. Kadangkala kita perlu menukar baris jadual kepada lajur untuk mencapai kesan paparan yang lebih baik atau keperluan pemprosesan data. jQuery ialah perpustakaan JavaScript ringan yang menyediakan manipulasi DOM dan kaedah pengendalian peristiwa yang mudah, menjadikan operasi penukaran data jadual ini mudah dan mudah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menukar baris jadual kepada lajur.

Mengapa kita perlu menukar baris jadual kepada lajur?

Dalam pembangunan sebenar, kadangkala kita perlu memaparkan dan memproses data jadual dengan lebih terperinci. Contohnya, dalam jadual, satu baris mewakili produk dan setiap lajur mewakili atribut produk Jika kita ingin mengklasifikasikan atau membandingkan semua produk berdasarkan atributnya, kita perlu menukar baris jadual kepada lajur. Jadual yang ditukar boleh memaparkan dengan lebih jelas atribut produk atau perbezaan antara atribut, menjadikannya lebih mudah untuk pengguna atau pembangun memproses dan menganalisis data.

Idea untuk menukar baris jadual kepada lajur

Untuk menukar baris jadual kepada lajur, kita perlu membaca data dalam jadual melalui JavaScript/jQuery dan menghimpunkannya ke dalam jadual baharu. Idea pelaksanaan khusus adalah seperti berikut:

1. Pertama, kita perlu membaca semua data dalam jadual dan memahami struktur data jadual dan maksud setiap lajur.
2. Proses data dan ekstrak pengepala baris, pengepala lajur dan data.
3. Pasang struktur jadual baharu dan tambahkan data yang diproses padanya.

Langkah-langkah untuk melaksanakan jQuery untuk menukar baris jadual kepada lajur

Sekarang, mari kita laksanakan operasi menukar baris jadual kepada lajur langkah demi langkah.

1. Sediakan struktur jadual yang memerlukan baris jadual ditukar kepada lajur. Contohnya:

<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. Melalui kod jQuery berikut, baca data jadual asal dan simpannya dalam tatasusunan:

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. Seterusnya , kami Menyimpan pengepala baris, pengepala lajur dan data dalam tiga tatasusunan berbeza:

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);
  }
}

Pada ketika ini, kami telah berjaya menyimpan data dalam tatasusunan berbeza mengikut baris, lajur dan nilai. Seterusnya, kita perlu mencipta struktur jadual baharu daripada tatasusunan ini.

4. Buat struktur jadual baharu dan masukkannya ke dalam dokumen 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. Akhir sekali, kita perlu mengalih keluar jadual asal:

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

Pada ketika ini, kami telah menyelesaikan operasi menukar baris jadual kepada lajur. Kini, jadual asal telah dialih keluar dan jadual yang ditukar telah dimasukkan ke dalam dokumen HTML.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk menukar baris jadual kepada lajur. Pelaksanaan khusus adalah untuk memasang struktur jadual baharu dengan membaca data jadual dan memproses data. Melalui operasi ini, data dalam jadual boleh dipaparkan dan diproses dengan lebih jelas dan intuitif. Bagi pembangun dan penganalisis data, ini mempunyai implikasi penting untuk memproses data dengan cepat dan menganalisis maknanya.

Atas ialah kandungan terperinci jquery menukar baris jadual kepada lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!