html表格行列转换,jQuery+CSS实现的table表格行列转置功能示例

这是一个简单的示例，使用 jQuery 和 CSS 实现了表格的行列转换功能：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

CSS 代码：

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 5px;
}

tr {
  height: 30px;
}

td {
  text-align: center;
}

JavaScript 代码：

$(function() {
  // 获取表格对象
  var table = $('#myTable');

  // 获取表头对象
  var thead = table.find('thead');

  // 获取表体对象
  var tbody = table.find('tbody');

  // 获取表头行对象
  var trsHead = thead.find('tr');

  // 获取表体行对象
  var trsBody = tbody.find('tr');

  // 创建一个新的表格对象
  var newTable = $('<table>');

  // 将新表格对象添加到页面中
  table.after(newTable);

  // 获取新表格对象的 jQuery 对象
  var newTableJqObj = $(newTable);

  // 遍历表头行对象
  trsHead.each(function() {
    // 创建一个新的行对象
    var tr = $('<tr>');

    // 获取当前行对象的 jQuery 对象
    var trJqObj = $(tr);

    // 遍历当前行的每个单元格
    $(this)
      .find('th')
      .each(function() {
        // 克隆当前单元格的 jQuery 对象
        var td = $(this).clone();

        // 将克隆出来的单元格对象添加到新行对象中
        trJqObj.append(td);
      });

    // 将新行对象添加到新表格对象中
    newTableJqObj.append(trJqObj);
  });

  // 遍历表体行对象
  trsBody.each(function() {
    // 遍历当前行的每个单元格
    $(this)
      .find('td')
      .each(function(index) {
        // 如果当前行是第一行，则需要创建新的行对象
        if (index === 0) {
          var tr = $('<tr>');
          newTableJqObj.append(tr);
        }

        // 获取新表格对象的最后一行对象
        var trJqObj = newTableJqObj.find('tr:last');

        // 克隆当前单元格的 jQuery 对象
        var td = $(this).clone();

        // 将克隆出来的单元格对象添加到新行对象中
        trJqObj.append(td);
      });
  });
});

这段代码会将原表格中的行列进行转换，并在页面中生成一个新的表格对象。注意，这段代码只是一个简单的示例，可能存在一些问题，需要根据实际情况进行调整和优化。