学习
实践
活动
专区
工具
TVP
写文章

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

基础知识一:动态为表格添加行,或者列(原输入的数据保持不变)

效果如上图所示(没有美化),当点击最上方的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标签中设置字符编码

代码段

最后,附上最终结果图

动态为表格添加行,或者列(原输入的数据保持不变)源码浏览:

源码浏览

基础知识一:动态为表格添加行,或者列(原输入的数据保持不变)

标题

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

努力了这么久

我怎么舍得放弃

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180722G17FFO00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券