在列，而该行的写字台（扩展）

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

下面是一些代码，将“炫”与th表的定义。

1. 它计算出有多少行的;
2. 它设置了一些模板
3. 它然后通过运行头，并读取列其转录到行。
4. 添加该行到新表。
5. 替换旧表用新的。

注意：您对旧表会消失任何处理程序，因为该表没有任何ths的代码将无法正常工作切换回来。这仅作为一个起点。

$("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>

Answer 2

也许你可以在此表的上方保持“日”元素只能在另一个表。而且这样你就不必反转的标题。只有反转与数据的升降台。