excel2013行列如何轉(zhuǎn)換

xcel2013行列轉(zhuǎn)換教程：

軟件版本：
軟件大小：
軟件授權(quán)：
適用平臺(tái)：
http://dl.pconline.com.cn/download/356399.html

行列轉(zhuǎn)換步驟1：打開(kāi)Excel2013，新建空白文檔，在第一行的單元格里輸入一些內(nèi)容。

行列轉(zhuǎn)換步驟2：選中這些單元格，右鍵復(fù)制。

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

行列轉(zhuǎn)換步驟4：彈出選擇性粘貼界面，勾選轉(zhuǎn)置選項(xiàng)，確定。

行列轉(zhuǎn)換步驟5：剛才選定的單元格依次生成數(shù)據(jù)，這樣就實(shí)現(xiàn)了行列轉(zhuǎn)置的目的。

表格動(dòng)態(tài)添加行列有兩種方法(推薦使用第二種)

1)使用document.createElement('標(biāo)簽')的方法動(dòng)態(tài)創(chuàng)建行列

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>動(dòng)態(tài)創(chuàng)建行列標(biāo)簽</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">
        //頁(yè)面加載完畢后執(zhí)行
        window.onload = function () {
            //獲取表格對(duì)象
            var tb = document.getElementById('tbList');
            //json格式的單元格數(shù)據(jù)
            var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '騰訊': 'https://www.qq.com' };
            //使用for in 循環(huán)創(chuàng)建行列
            for (var key in datas) {
                //創(chuàng)建行對(duì)象
                var tr = document.createElement('tr');
                //創(chuàng)建第一列
                var td1 = document.createElement('td');
                //為第一列添加數(shù)據(jù)
                td1.innerHTML = key;
                //創(chuàng)建第二列
                var td2 = document.createElement('td');
                //為第二列添加拼接的超鏈接數(shù)據(jù)
                td2.innerHTML = '<a href="' + datas[key] + '">' + key + '</a>';
                //將兩個(gè)列追加到行中
                tr.appendChild(td1);
                tr.appendChild(td2);
                //將行追加到表格中
                tb.appendChild(tr);
            }
        }
    </script>
</head>
<body>
    <table id="tbList"></table>
</body>
</html>

2)使用insertRow()與insertCell()方法動(dòng)態(tài)創(chuàng)建行列

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>動(dòng)態(tài)創(chuàng)建行列標(biāo)簽</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">
        //頁(yè)面加載完畢后執(zhí)行
        window.onload = function () {
            //獲取表格對(duì)象
            var tb = document.getElementById('tbList');
            //json格式的單元格數(shù)據(jù)
            var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '騰訊': 'https://www.qq.com' };
            //使用for in 循環(huán)創(chuàng)建行列
            for (var key in datas) {
                //創(chuàng)建一行,-1表示追加的意思。
                var tr = tb.insertRow(-1);
                //創(chuàng)建第一列
                var td1 = tr.insertCell(-1);
                //添加數(shù)據(jù)
                td1.innerHTML = key;
                //創(chuàng)建第二列并為其添加數(shù)據(jù)
                var td2 = tr.insertCell(-1).innerHTML = '<a href="' + datas[key] + '">' + key + '</a>';
            }
        }
    </script>
</head>
<body>
    <table id="tbList"></table>
</body>
</html>

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

## table

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

### 一般做法

大部分的網(wǎng)上介紹的實(shí)現(xiàn)方式，甚至部分ui框架如iview等都是通過(guò)三至四個(gè)表格組合，然后js處理同步滾動(dòng)來(lái)實(shí)現(xiàn)，這樣的好處是容易實(shí)現(xiàn)，pc端也不會(huì)出現(xiàn)什么問(wèn)題。但是在手機(jī)端時(shí)，會(huì)有嚴(yán)重的不同步滾動(dòng)現(xiàn)象，處理的不好時(shí)，甚至?xí)霈F(xiàn)錯(cuò)位等，體驗(yàn)非常不好。

### 本文做法

主要使用了二個(gè)css屬性

* table-layout: fixed

* posotion: sticky

### table-layout

為了讓表格呈現(xiàn)滾動(dòng)效果，必須設(shè)定table-layout: fixed，并且給與表格寬度

```css

table {

table-layout: fixed;

width: 100%;

}

```

### position

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

sticky的表現(xiàn)類似于relative和fixed的合體，在超過(guò)目標(biāo)區(qū)域時(shí)，他會(huì)固定于目標(biāo)位置

**注意:** `posotion: sticky`應(yīng)用于table時(shí)，只能作用于`<th>`和`<td>`，并且必須定義目標(biāo)位置left / right / top / bottom來(lái)實(shí)現(xiàn)固定效果

```

thead tr th {

position:sticky;

top:0;

}

```

簡(jiǎn)單說(shuō)明這兩個(gè)屬性后，我們首先建立一個(gè)帶表格的html頁(yè)面

```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很重要，需要仔細(xì)設(shè)置，尤其是對(duì)于ios

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

* 自測(cè)時(shí)，手機(jī)端安卓與ios測(cè)試各測(cè)試了兩臺(tái)，均是可以的，但是測(cè)試的機(jī)型不全，需要自行多測(cè)試

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

excel2013行列如何轉(zhuǎn)換

您的項(xiàng)目需求