原生js实现表格拉伸改变宽度

时候会需要做一个可以拉伸宽度的表格，但是现有的表格是没有这个功能的，那就需要我们手动的实现，下面我来看看，如何用原生js实现。

先看效果图，都是在表格头部进行的拉伸：

单元格被拉伸的时候，整体表格宽度不变

单元格被拉伸的时候，整体表格会变宽。

话不多说，直接上代码：

<!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>语文分数</td>
            <td>数学分数</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 () {
             //结束宽度调整
             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};
            //调整宽度
             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);
                    //调整列宽
                    tTD.style.width = tTD.width;
                    tTD.style.cursor = 'col-resize';
                 //调整该列中的每个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;
                }
                //调整整个表
                // table.width = tTD.tableWidth + (tTD.offsetWidth-tTD.oldWidth);
                // table.style.width = table.width;
             }
         };
     }

</script>

现有的代码可以复制到本地运行，直接得到图一的效果；把文中注释的部分的代码释放，就是得到图二。有兴趣的可以自行研究哦！

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

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

table标记的边框–border

table标记的宽度–width

table标记的高度–height

table标记的水平对齐方式–align

table标记的表格背景色–bgcolor

table标记的表格边框色–bordercolor

table标记的表格中的内容与边框之间的距离–cellpadding

table标记的表格中的边框与边框之间的距离–cellspacing【默认是1px】

tr标记的align属性–设置当前行的水平对齐方式

tr标记的bgcolor属性–设置当前行的背景色

tr标记的valign属性–设置当前行的垂直对齐方式【top/middle/bottom】

td标记的align属性–设置当前列的水平对齐方式

td标记的bgcolor属性–设置当前列的背景色

td标记的valign属性–设置当前列的垂直对齐方式【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—列表中的每一项【条目】

默认的标志是有顺序的数字

我们可以通过ol的type属性来修改标志

1–有顺序的数字

a–有顺序的小写字母

A–有顺序的大写字母

i–有顺序的小写罗马数字

I–有顺序的大写罗马数字

start属性设置书顺序的开始值

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—指定表单数据的后端处理程序

method----指定表单数据的提交方式【get[默认]/post】

get提交数据会将被处理的数据跟随在请求地址之后

被提交的数据255个字符

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

post提交数据会将被处理的数据封装到http协议的头

https://www.baidu.com/s

被提交的数据没有限制

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

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

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

<td>在发送前对所有字符进行编码（默认）。</td>

</tr>

<tr>

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

<td>不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>将空格转换为 "+" 符号，但不编码特殊字符。</td>

</tr>

</table>

</body>

</html>

表单元素

input 文本框/密码框/单选按钮/复选框…

seletc 下拉列表

textarea 文本域—富文本编辑器

例

设置表格的布局算法：

table

{

table-layout:fixed;

}

属性定义及使用说明

table-layout属性为表设置表格布局算法。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.tableLayout="fixed"

浏览器支持

所有主流浏览器都支持table-layout属性。

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

属性值

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit
规定应该从父元素继承 table-layout 属性的值。实例设置表格的布局算法：table{table-layout:fixed;}尝试一下 » 属性定义及使用说明table-layout属性为表设置表格布局算法。默认值：auto继承：no版本：CSS2JavaScript 语法：object.style.tableLayout="fixed" 浏览器支持	所有主流浏览器都支持table-layout属性。注意： IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。属性值值描述automatic默认。列宽度由单元格内容设定。fixed列宽由表格宽度和列宽度设定。inherit规定应该从父元素继承 table-layout 属性的值。

在线咨询

上一篇：前端工程师如何制作EDM 邮件页面
下一篇：抖音上很火的3D立体动态相册实现代码！赶快学起来吧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

原生js实现表格拉伸改变宽度

您的项目需求