代码之家 › 专栏 › 技术社区 › TheChubbyPanda

以列而不是行的形式编写表(扩展名)

html-table html jquery

TheChubbyPanda · 技术社区 · 7 年前

我想将数据以列而不是行的形式输入到表中。来自链接问题的jquery示例工作得很好,除了它也移动了headings()之外。我想知道如何离开标题,只是旋转内容我试过这个:

<script type="text/javascript">
    $(function() {
        $("a").click(function() {
            $("table").each(function() {
                var $this = $(this);
                var newrows = [];
                $this.find("tr").each(function() {
                    var i = 0;
                    $(this).find("td").each(function() {
                        i++;
                        if (newrows[i] === undefined) {
                            newrows[i] = $("<tr></tr>");
                        }
                        newrows[i].append($(this));
                    });
                });
                $this.find("tr").remove();
                $.each(newrows, function() {
                    $this.append(this);
                });
            });

            return false;
        });
    });
</script>

但标题就消失了。

2 回复 | 直到 7 年前

Steve0 6 年前

这里有一些代码可以“翻转”一张桌子 th 的定义。

它计算出有多少行;
它设置了一些模板
然后,它会遍历标题并读取将其转录到行的列。
将该行添加到新表中。
把旧桌子换成新桌子。

注意旧桌子上的任何处理程序都会消失,因为桌子上没有 第 s代码无法将其切换回。这只是一个起点。

$("button.flip").click(function(e) {
  e.preventDefault();
  var $table = $(this).prev("table");
  var $newTable = $("<table>");
  var $newRowTemplate = $("<tr>");
  var rowCount = $table.find("tr").length;
  for (let i = 1; i <= rowCount; i++) {
    $newRowTemplate.append("<td>");
  }

  $.each($table.find("tr:first-child > th"), function(col, cell) {
    var $newRow = $newRowTemplate.clone();
    var txt = "";
    $($newRow.find("td")[0]).html($(cell).text());
    for (let y = 1; y <= rowCount; y++) {
      txt = $table
        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();
      $($newRow.find("td")[y]).html(txt);
    }
    $newTable.append($newRow);
  });
  //$(this).after($newTable);
  if (!$newTable.is(":empty")) {
    $table.remove();
    $(this).before($newTable);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Student</th>
      <th>Class</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>History</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>English</td>
      <td>D</td>
    </tr>
    <tr>
      <td>Sam</td>
      <td>Math</td>
      <td>A</td>
    </tr>
  </tbody>
</table>
<button class="flip">flip</button>

编辑经过一点努力,我能够使这个工作,然后反向本身,我再次怀疑任何事件处理程序将丢失。

$("button.flip").click(function(e) {
  e.preventDefault();
  var $table = $(this).prev("table"); //orig table reference
  var $newTable = $("<table>"); //new table placeholder
  var rowCount = $table.find("tr").length; //the number of rows in the orig table

  //loop through the first rows cells
  $.each($($table.find("tr")[0]).children(), function(col, cell) {
    var $newRow = $("<tr>"); //create a new row
    $newRow.append($(cell).clone()); //append the current cell
    //traverse the column appending the cells to the row as we go
    for (let y = 1; y <= rowCount; y++) {
      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());
    }
    $newTable.append($newRow); //put the new row in the new table
  });
  //if I managed to do some work lets remove the old table and replace it with the new one
  if (!$newTable.is(":empty")) {
    $table.remove();
    $(this).before($newTable);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Student</th>
      <th>Class</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>History</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>English</td>
      <td>D</td>
    </tr>
    <tr>
      <td>Sam</td>
      <td>Math</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Quinn</td>
      <td>Javascript</td>
      <td>D-</td>
    </tr>
  </tbody>
</table>
<button class="flip">flip</button>

-1

Kiran Sripada 7 年前

也许你可以把“th”元素只放在这个表的顶部的另一个表中。这样你就不用颠倒标题了。只能用数据反转下表。