Question

这是this question的扩展名。

我想以列而不是行的形式向表中输入数据。链接问题中的jquery示例工作得很好，只不过它也移动了标题（）。我想知道如何离开标题并仅旋转内容。我尝试过：

<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>

但是标题只是消失了。

Answer 1

这里有一些代码将“翻转”已定义<script>的表。

它计算出有多少行；
它设置了一些模板
然后它遍历标题并读取将其转录为一行的列。
将该行添加到新表中。
用新表替换旧表。

注意，您在旧表上使用的所有处理程序都会消失，并且由于该表没有任何th，因此代码无法将其切换回原来的状态。这只是一个起点。

th

$("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);
  }
});

Answer 2

也许您只能将“ th”个元素保留在该表顶部的另一个表中。这样，您就不必反转标题。仅将数据倒置到表中。

用列而不是行写表（扩展名）

2 个答案: