excel2013行列如何轉換

xcel2013行列轉換教程：

軟件版本：
軟件大小：
軟件授權：
適用平臺：
http://dl.pconline.com.cn/download/356399.html

行列轉換步驟1：打開Excel2013，新建空白文檔，在第一行的單元格里輸入一些內容。

行列轉換步驟2：選中這些單元格，右鍵復制。

行列轉換步驟3：在第一列空白處，右鍵點擊->；選擇性粘貼->；選擇性粘貼。

行列轉換步驟4：彈出選擇性粘貼界面，勾選轉置選項，確定。

行列轉換步驟5：剛才選定的單元格依次生成數據，這樣就實現了行列轉置的目的。

表格動態添加行列有兩種方法(推薦使用第二種)

1)使用document.createElement('標簽')的方法動態創建行列

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>動態創建行列標簽</title>
    <style type="text/css">
        #tbList {
            width: 500px;
            border: 1px solid blue;
            border-collapse: collapse;
            margin: auto;
        }

        tr, td {
            border: 1px solid blue;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        //頁面加載完畢后執行
        window.onload = function () {
            //獲取表格對象
            var tb = document.getElementById('tbList');
            //json格式的單元格數據
            var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '騰訊': 'https://www.qq.com' };
            //使用for in 循環創建行列
            for (var key in datas) {
                //創建行對象
                var tr = document.createElement('tr');
                //創建第一列
                var td1 = document.createElement('td');
                //為第一列添加數據
                td1.innerHTML = key;
                //創建第二列
                var td2 = document.createElement('td');
                //為第二列添加拼接的超鏈接數據
                td2.innerHTML = '<a href="' + datas[key] + '">' + key + '</a>';
                //將兩個列追加到行中
                tr.appendChild(td1);
                tr.appendChild(td2);
                //將行追加到表格中
                tb.appendChild(tr);
            }
        }
    </script>
</head>
<body>
    <table id="tbList"></table>
</body>
</html>

2)使用insertRow()與insertCell()方法動態創建行列

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>動態創建行列標簽</title>
    <style type="text/css">
        #tbList {
            width: 500px;
            border: 1px solid blue;
            border-collapse: collapse;
            margin: auto;
        }

        tr, td {
            border: 1px solid blue;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        //頁面加載完畢后執行
        window.onload = function () {
            //獲取表格對象
            var tb = document.getElementById('tbList');
            //json格式的單元格數據
            var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '騰訊': 'https://www.qq.com' };
            //使用for in 循環創建行列
            for (var key in datas) {
                //創建一行,-1表示追加的意思。
                var tr = tb.insertRow(-1);
                //創建第一列
                var td1 = tr.insertCell(-1);
                //添加數據
                td1.innerHTML = key;
                //創建第二列并為其添加數據
                var td2 = tr.insertCell(-1).innerHTML = '<a href="' + datas[key] + '">' + key + '</a>';
            }
        }
    </script>
</head>
<body>
    <table id="tbList"></table>
</body>
</html>

注意:ie6，ie7對appendChild("tr")的支持和IE8不一樣;推薦使用insertRow與insertCell來代替第一種方法或者先為表格添加tbody標簽再使用第一種方法(只對IE與谷歌瀏覽器測試,其他瀏覽器的兼容性需要自測)

## table

表格是一個網站很常用的元素，用以展示大量的數據。在處理表格時，通常會加入許多功能，如斑馬線、選中高亮、固定表頭、鎖定列等等，本篇文章主要介紹如何單純的使用css實現固定行或列的功能。

### 一般做法

大部分的網上介紹的實現方式，甚至部分ui框架如iview等都是通過三至四個表格組合，然后js處理同步滾動來實現，這樣的好處是容易實現，pc端也不會出現什么問題。但是在手機端時，會有嚴重的不同步滾動現象，處理的不好時，甚至會出現錯位等，體驗非常不好。

### 本文做法

主要使用了二個css屬性

* table-layout: fixed

* posotion: sticky

### table-layout

為了讓表格呈現滾動效果，必須設定table-layout: fixed，并且給與表格寬度

```css

table {

table-layout: fixed;

width: 100%;

}

```

### position

固定表格的行列需要使用到`posotion: sticky`設定

sticky的表現類似于relative和fixed的合體，在超過目標區域時，他會固定于目標位置

**注意:** `posotion: sticky`應用于table時，只能作用于`<th>`和`<td>`，并且必須定義目標位置left / right / top / bottom來實現固定效果

```

thead tr th {

position:sticky;

top:0;

}

```

簡單說明這兩個屬性后，我們首先建立一個帶表格的html頁面

```html

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr> <tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

```

css部分如下

```

<style>

div{

overflow:auto;

width:400px;

height:290px; /* 固定高度 */

border:1px solid gray;

border-bottom: 0;

border-right: 0;

}

td, th {

border-right :1px solid gray;

border-bottom :1px solid gray;

width:100px;

height:30px;

box-sizing: border-box;

}

th {

background-color:lightblue;

}

table {

border-collapse:separate;

table-layout: fixed;

width: 100%; /* 固定寬度 */

}

td:first-child, th:first-child {

position:sticky;

left:0; /* 首行在左 */

z-index:1;

background-color:lightpink;

}

thead tr th {

position:sticky;

top:0; /* 第一列最上 */

}

th:first-child{

z-index:2;

background-color:lightblue;

}

</style>

```

最后的效果如下：

### 注意

* z-index很重要，需要仔細設置，尤其是對于ios

* 如果是固定多列，每一列需要注意設置好left的值

* 自測時，手機端安卓與ios測試各測試了兩臺，均是可以的，但是測試的機型不全，需要自行多測試

在線咨詢

上一篇：Web端文件上傳從未如此簡單，但卻很強大-bootstrap-fileinput
下一篇：使用Jackson將JSON字符串轉換為Java Map

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

excel2013行列如何轉換

您的項目需求