通过点击按钮添加行

最新推荐文章于 2024-05-01 06:00:24 发布

ldxq

最新推荐文章于 2024-05-01 06:00:24 发布

阅读量705

点赞数

本文链接：https://blog.csdn.net/weixin_44540993/article/details/99048173

版权

-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs· jQuery基础
作者： xqll
撰写时间：2019/8/8
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
通过点击事件点击按钮在table表单里面添加/插入行
在这里插入图片描述
一开始的效果是这样的我要做的是通过点击增加单位按钮
每点击一下增加多一行自己设置好的样式
具体操作如下
$("#incunit").click(function () {
var yyy = document.getElementById(“yyy”);
var ab = yyy.getElementsByTagName(“tr”);
var Num = ab.length;
//插入行
var IsRow = yyy.insertRow();

var Id = yyy.innerHTML.length;
console.log(IsRow);
console.log(Id);
//插入单元格
if (Id <= 4090) {
这个Id <= 4090 意思是限制它多少条之类可以新增超过了那个条数点击新增出来的就隐藏掉了
小于或等于4090不是小于或等于4090条数据的意思
他是根据这里得到的
在这里插入图片描述
这些数字是根据什么得到的我也不清楚…
var IsCell1 = IsRow.insertCell();
var IsCell2 = IsRow.insertCell();
var IsCell3 = IsRow.insertCell();
//放入内容

  IsCell1.innerHTML = '<div class="aq"><span style="color:red;"></span><a href="javascript:;" style="text-decoration:none;"><i class="layui-icon a" id="ee' + Num + '">&#x1006;</i></a><span>副单位' + Num + '</span></div>';
    
  IsCell2.innerHTML = ' <select class="form-control ohh" id="box' + Num + '" name="Nameentity" onblur="CLisk'+Num+'()"></select>';
    
  IsCell3.innerHTML = '<div class="d-flex justify-content-start ai"><span class="e">=</span> <input type="email" id="huan' + Num + '" class="form-control em" style="font-size:12px;" placeholder="换算倍数"></div>'; 
        })

上面这三条的话是table表单tr元素里面的td元素就是说它tr里面有3个td 而且这个样式是自己给的
拼接Num 是之前上面设置的每新增一个然后加上1 你要名字加多1 还是ID 都可以因为ID 不可以是一样的
在这里插入图片描述
就比如说我第一条是副单位1 第二条就是副单位2 了
然后ID也是一样的来个图片验证一下

然后这样就看得很清楚了
然后你想要的效果也就出来了