In front-end development, the processing and display of table data are often involved. Sometimes we need to convert table rows into columns for better display or data processing needs. jQuery is a lightweight JavaScript library that provides convenient DOM manipulation and event handling methods, making this table data conversion operation simple and easy. This article will introduce how to use jQuery to convert table rows to columns.
In actual development, sometimes we need to display and process table data in more detail. For example, in a table, one row represents a product, and each column represents the attributes of the product. If we want to classify or compare all products based on their attributes, we need to convert the table rows into columns. The converted table can more clearly display product attributes or differences between attributes, making it easier for users or developers to process and analyze data.
To convert table rows to columns, we need to read the data in the table through JavaScript/jQuery and assemble it into a new table. The specific implementation ideas are as follows:
Now, let us implement the operation of converting table rows to columns step by step.
| 产品A | 产品B | 产品C | |
|---|---|---|---|
| 颜色 | 红色 | 蓝色 | 绿色 |
| 尺寸 | 大号 | 中号 | 小号 |
| 售价 | 100 | 200 | 150 |
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); }
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); } }
At this point, we have successfully stored the data in different arrays by row, column, and value. Next, we need to create a new table structure from these arrays.
var newTable = $('| ').text('')); for (var i = 0; i < colHeaders.length; i++) { headerRow.append($(' | ').text(colHeaders[i])); } newTable.append(headerRow); for (var i = 0; i < rowHeaders.length; i++) { var row = $(' |
|---|---|
| ').text(rowHeaders[i])); for (var j = 0; j < values.length; j++) { row.append($(' | ').text(values[j][i])); } newTable.append(row); } $('#original').after(newTable);
Copy after login
$('#original').remove();
Copy after login
At this point, we have completed the operation of converting table rows to columns. Now, the original table has been removed and the converted table has been inserted into the HTML document. SummaryThis article introduces how to use jQuery to convert table rows to columns. The specific implementation is to assemble a new table structure by reading table data and processing the data. Through this operation, the data in the table can be displayed and processed more clearly and intuitively. For developers and data analysts, this has important implications for quickly processing data and analyzing its meaning. The above is the detailed content of jquery converts table rows to columns. For more information, please follow other related articles on the PHP Chinese website!
source：php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to display the mobile version of Google Chrome
Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
9
1411
There is no output in the parent window
document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1145
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
