基础知识一：动态为表格添加行，或者列

基础知识一：动态为表格添加行，或者列（原输入的数据保持不变）

效果如上图所示（没有美化），当点击最上方的4个按钮，会有期望的效果！

为了实现上面的效果，我们需要做以下的准备：

去jquery官网下载 jquery-3.3.1.min.js（其实下载最新版本的就好，在项目中引入时，做相应的修改即可）

需要有一定的jquery知识

在web目录下新建一个名为js文件夹，并将 jquery-3.3.1.min.js 放入其中

在web目录下新建一个名为css文件夹，并新建一个名为myStyle.css的css文件（目的是为了使textarea这个元素自适应table的每一个单元格，并消除边界），内容如下：

代码段

textarea{

font-size: 20px;

border-bottom: hidden;

border-top: hidden;

border-left: hidden;

border-right: hidden;

width: 100%;

}

.layui-form-select dl dd, .layui-form-select dl dt{

background-color: #01AAED;

}

现在。开始进入正题

1、先构建一个基本的框架，即上图的界面效果，但是。按按钮并没有反应

代码段

代码说明：注意为最上方的四个按钮添加class属性，为了下面一步——添加监听

2、效果的实现

增加列

代码段

$(".colAdd").click(function(){

var str = ""

$(".tr").append(str);

});

代码说明：这里使用了一个关键函数.append()，即在选择元素的子元素末尾添加一些东西

减少列

代码段

$(".colMinus").click(function(){

var table = document.getElementById("table");

var rowsLength = table.rows.length;//得到table共有多少行

var colsLength = table.rows[0].cells.length;//得到table共有多少列

for(var i = 0;i

var index = -1-(rowsLength-1-i)*colsLength;

//移除最后一列元素，，

// 因为这里是选种全部的col，而不是每一个tr下的col

$(".col").eq(index).remove();

}

});

代码说明：

这里使用了两个关键jquery函数

eq(index) 其中的参数表示下标，可以为正，也可以为负，当为正时，第一个元素下标为0，当为负时，最后一个元素下标为-1，倒数第二个元素下标为-2，以此类推。。。

remove()移除选中的元素

因为table中的所有单元格都有一个class="col"的属性，所以$(".col")选中了所有单元格，因此需要正确计算最后一列所对应的所有单元格的对于的下标

其他的看上方的注释即可

添加行

代码段

$(".rowAdd").click(function(){

var table = document.getElementById("table");

var colsLength = table.rows[0].cells.length;

var subStr1 = ""

var subStr2 = "";

for(var i = 1;i

var subStr2_str = "";

subStr2 += subStr2_str;

}

var subStr3 = ""

var str = subStr1+subStr2+subStr3;

$(".table").append(str);

});

代码说明：这段代码没有引入新的知识点

减少行

代码段

$(".rowMinus").click(function(){

$(".tr").eq(-1).remove();

});

3、注意在title标签中设置字符编码

代码段

最后，附上最终结果图

动态为表格添加行，或者列（原输入的数据保持不变）源码浏览：

源码浏览

基础知识一：动态为表格添加行，或者列（原输入的数据保持不变）

标题

坚持努力，因为最后你会发现

努力了这么久

我怎么舍得放弃