原生js實現(xiàn)表格拉伸改變寬度

時候會需要做一個可以拉伸寬度的表格，但是現(xiàn)有的表格是沒有這個功能的，那就需要我們手動的實現(xiàn)，下面我來看看，如何用原生js實現(xiàn)。

先看效果圖，都是在表格頭部進行的拉伸：

單元格被拉伸的時候，整體表格寬度不變

單元格被拉伸的時候，整體表格會變寬。

話不多說，直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格拉伸</title>
    <style>
      #tab{
        text-align:center 
      }
    </style>
</head>
<body>
    <table id="tab" border="1"  cellpadding="2" cellspacing="0" width="500px" >
        <tr style="background-color: #dcdcdc">
            <td style="width:100px;">序號</td>
            <td>姓名</td>
            <td>語文分數(shù)</td>
            <td>數(shù)學分數(shù)</td>
        </tr>
        <tr>
            <td>1</td>
            <td>李萌</td>
            <td>80</td>
            <td>98</td>
        </tr>
        <tr>
            <td>2</td>
            <td>趙新</td>
            <td>98</td>
            <td>88</td>
        </tr>
        <tr>
            <td>3</td>
            <td>張小紅</td>
            <td>82</td>
            <td>84</td>
        </tr>
        <tr>
            <td>4</td>
            <td>陳成</td>
            <td>98</td>
            <td>94</td>
        </tr>
        <tr>
            <td>5</td>
            <td>胡山</td>
            <td>77</td>
            <td>94</td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
     let tTD; 
     let table = document.getElementById("tab");
     for (let i = 0; i <  table.rows [0].cells.length; i++) {
         table.rows[0].cells[i].onmousedown = function () {
            //記錄單元格
             tTD = this;
             if (event.offsetX > tTD.offsetWidth - 10) {
                 tTD.mouseDown = true;
                 tTD.oldX = event.x;
                 tTD.oldWidth = tTD.offsetWidth;
             };
            //記錄Table寬度（單元格拉伸，表格整體寬度變化時用的）
            //table = tTD; 
           // while (table.tagName != 'TABLE') {table = table.parentElement};
            //tTD.tableWidth = table.offsetWidth;
         };
         
         table.rows[0].cells[i].onmouseup = function () {
             //結(jié)束寬度調(diào)整
             if (tTD == undefined) {
                 tTD = this
            };
            tTD.mouseDown = false;
            tTD.style.cursor = 'default';
         };

         table.rows[0].cells[i].onmousemove = function () {
             //更改鼠標樣式
             if (event.offsetX > this.offsetWidth - 10){
                this.style.cursor = 'col-resize';
             }else{
                this.style.cursor = 'default';
             };
                 
            //取出暫存的Table Cell
             if (tTD == undefined) {tTD = this};
            //調(diào)整寬度
             if (tTD.mouseDown != null && tTD.mouseDown == true) {
                 tTD.style.cursor = 'default';
                 if (tTD.oldWidth + (event.x - tTD.oldX) > 0){
                    tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                    //調(diào)整列寬
                    tTD.style.width = tTD.width;
                    tTD.style.cursor = 'col-resize';
                 //調(diào)整該列中的每個Cell
                    table = tTD;
                 }
                  
                while (table.tagName != 'TABLE') {table = table.parentElement};
                for (let j = 0; j <  table.rows.length ; j++) {
                    table.rows[j].cells[tTD.cellIndex].width = tTD.width;
                }
                //調(diào)整整個表
                // table.width = tTD.tableWidth + (tTD.offsetWidth-tTD.oldWidth);
                // table.style.width = table.width;
             }
         };
     }

</script>

現(xiàn)有的代碼可以復制到本地運行，直接得到圖一的效果；把文中注釋的部分的代碼釋放，就是得到圖二。有興趣的可以自行研究哦！

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

表格中的表頭–【居中/加粗】

table標記的邊框–border

table標記的寬度–width

table標記的高度–height

table標記的水平對齊方式–align

table標記的表格背景色–bgcolor

table標記的表格邊框色–bordercolor

table標記的表格中的內(nèi)容與邊框之間的距離–cellpadding

table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】

tr標記的align屬性–設(shè)置當前行的水平對齊方式

tr標記的bgcolor屬性–設(shè)置當前行的背景色

tr標記的valign屬性–設(shè)置當前行的垂直對齊方式【top/middle/bottom】

td標記的align屬性–設(shè)置當前列的水平對齊方式

td標記的bgcolor屬性–設(shè)置當前列的背景色

td標記的valign屬性–設(shè)置當前列的垂直對齊方式【top/middle/bottom】

合并單元格

水平方向合并單元格–跨列—colspan

垂直方向合并單元格–跨行—rowspan
刪除多余的單元格*

以下是計算器的控制面板代碼

<!DOCTYPE html>

<html>

<head>

<title>計算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

</tr>

</tr>

</tr>

</tr>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

</tr>

</table>

</body>

</html>

看成品:

2. 列表元素

2.1 有序列表

ol—有序列表

li—列表中的每一項【條目】

默認的標志是有順序的數(shù)字

我們可以通過ol的type屬性來修改標志

1–有順序的數(shù)字

a–有順序的小寫字母

A–有順序的大寫字母

i–有順序的小寫羅馬數(shù)字

I–有順序的大寫羅馬數(shù)字

start屬性設(shè)置書順序的開始值

2.2 無序列表

ul—無序列表

li—列表中的每一項【條目】

默認的標志是實心點

我們可以通過ul的type屬性來修改標志

circle–圓形【。】

disc----實心點[默認]

square–正方形

none–沒有標志

2.3 自定義列表

dl—自定義列表

dt—自定義列表的頭

dd—子項目

以下是有序，無序，和自定義列表

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</ol>

<dl>

<dt>自定義列表</dt>

</dl>

</body>

</html>

3. 表單<form>

主要負責采集信息的，可以將采集的信息提交。

form的屬性

action—指定表單數(shù)據(jù)的后端處理程序

method----指定表單數(shù)據(jù)的提交方式【get[默認]/post】

get提交數(shù)據(jù)會將被處理的數(shù)據(jù)跟隨在請求地址之后

被提交的數(shù)據(jù)255個字符

https://www.baidu.com/s?&wd=html

post提交數(shù)據(jù)會將被處理的數(shù)據(jù)封裝到http協(xié)議的頭

https://www.baidu.com/s

被提交的數(shù)據(jù)沒有限制

通常情況下提交文件只能用post

enctype屬性規(guī)定在將表單數(shù)據(jù)發(fā)送到服務(wù)器之前如何對其進行編碼。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>application/x-www-form-urlencoded</td>

<td>在發(fā)送前對所有字符進行編碼（默認）。</td>

</tr>

<tr>

<td>multipart/form-data</td>

<td>不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>將空格轉(zhuǎn)換為 "+" 符號，但不編碼特殊字符。</td>

</tr>

</table>

</body>

</html>

表單元素

input 文本框/密碼框/單選按鈕/復選框…

seletc 下拉列表

textarea 文本域—富文本編輯器

例

設(shè)置表格的布局算法：

table

{

table-layout:fixed;

}

屬性定義及使用說明

table-layout屬性為表設(shè)置表格布局算法。

默認值：	auto
繼承：	no
版本：	CSS2
JavaScript 語法：	object.style.tableLayout="fixed"

瀏覽器支持

所有主流瀏覽器都支持table-layout屬性。

注意： IE7和更早的版本不支持"inherit"的值。IE8需要定義！DOCTYPE。IE9支持"inherit"。

屬性值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

值	描述
automatic	默認。列寬度由單元格內(nèi)容設(shè)定。
fixed	列寬由表格寬度和列寬度設(shè)定。
inherit
規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。實例設(shè)置表格的布局算法：table{table-layout:fixed;}嘗試一下 ? 屬性定義及使用說明table-layout屬性為表設(shè)置表格布局算法。默認值：auto繼承：no版本：CSS2JavaScript 語法：object.style.tableLayout="fixed" 瀏覽器支持	所有主流瀏覽器都支持table-layout屬性。注意： IE7和更早的版本不支持"inherit"的值。IE8需要定義！DOCTYPE。IE9支持"inherit"。屬性值值描述automatic默認。列寬度由單元格內(nèi)容設(shè)定。fixed列寬由表格寬度和列寬度設(shè)定。inherit規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。

在線咨詢

上一篇：前端工程師如何制作EDM 郵件頁面
下一篇：抖音上很火的3D立體動態(tài)相冊實現(xiàn)代碼！趕快學起來吧

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

原生js實現(xiàn)表格拉伸改變寬度

您的項目需求