javascript – 将TD列转换为TR行

前端之家收集整理的这篇文章主要介绍了javascript – 将TD列转换为TR行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有一种快速方法(使用CSS或 Javascript)将表TD转换为TR,目前我有:
A B C D
1 2 3 4

我想翻译成:

A 1
B 2
C 3
D 4

??

解决方法

您想要将HTML排列如下:
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

进入:

<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td>3</td></tr>
<tr><td>D</td><td>4</td></tr>

正确?

您可以使用Javascript执行此操作,但是,如果不了解您的网站/ HTML文件的结构,很难建议一种方法.我会试一试.

假设你的< table>标签附带一个ID(如下所示:< table id =“myTable”>您可以在javascript中访问它,如下所示:

var myTable = document.getElementById('myTable');

您可以像这样创建一个新表:

var newTable = document.createElement('table');

现在,您需要将旧表行转置到新表列中:

var maxColumns = 0;
// Find the max number of columns
for(var r = 0; r < myTable.rows.length; r++) {
    if(myTable.rows[r].cells.length > maxColumns) {
        maxColumns = myTable.rows[r].cells.length;
    }
}


for(var c = 0; c < maxColumns; c++) {
    newTable.insertRow(c);
    for(var r = 0; r < myTable.rows.length; r++) {
        if(myTable.rows[r].length <= c) {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = '-';
        }
        else {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML;
        }
    }
}

这应该做你需要的.预先警告:未经测试.将此javascript代码工作到HTML页面留给读者练习.如果有人发现我错过的任何错误,如果你指出它们或者只是编辑修复我会感到欣慰:)

原文链接:https://www.f2er.com/js/150758.html

猜你在找的JavaScript相关文章