jexcel如何选中表格后再执行点击事件

这篇博客讲述了在使用jexcel插件时,如何在用户选中表格数据后,通过添加自定义class并在按钮点击时捕获选中数据,将其转换为数组并利用AJAX发送到后端。作者遇到的问题是点击按钮导致选中状态消失,通过设置定时器解决了这个问题,确保在正确的时间获取和处理选中数据。
摘要由CSDN通过智能技术生成

在使用jexcel做一个选中几行几列数据(这个使jexcel插件自带功能)时,点击按钮需要将选中的数据变为数组在控制台打印出来,利用AJAX发送给后端。但是,当我点击按钮时,选中的数据就没有了,判断出来选中的单元格长度为0,无法成功打印数据。

(注:选中的单元格会在对应的 tr 上添加一个class = "selected",对应选中的 td 会添加 class = "highlight",) ,点击按钮相当于刷新,class类名就不见了,这个时候我想到当选中表格的时候,循环手动给 tr 或者 td 添加新的class类名。也就是说在点击按钮之前判断有没有class = ”selected“的,有就给他加上自己定义的class属性,但是这个判断会在页面加载好也就是表格数据读取出来的时候(没等到我选择几行几列)直接就判断了,这个时间的先后顺序问题怎样才能解决呢?

我首先想到了利用定时器,代码如下:

function update() {
                        if (tbody[0].getElementsByClassName('selected').length !== 0) {
                            var selectedTrs = tbody[0].getElementsByClassName('selected');
                            // console.log(selectedTrs[0]);
                            for (let i = 0; i < selectedTrs.length; i++) {
                                selectedTrs[i].classList.add('selected1');
                                var selectedTds = selectedTrs[i].getElementsByClassName('highlight');
                                // console.log(selectedTds)
                                for (let j = 0; j < selectedTds.length; j++) {
                                    selectedTds[j].classList.add('highlight1');
                                }
                            }
                        }
                    }
 if (tbody[0].getElementsByClassName('selected1').length !== 0 && tbody[0].getElementsByClassName('selected1').length == tbody[0].getElementsByClassName('selected').length) {
                        update();
                        clearInterval();
                    }
 else {
        setInterval(update, 1000);
      }

这样可以在点击按钮之前进行判断。意思就是页面加载完成后,if条件不成立,每隔1s 执行一个else语句里的update()函数,当条件成立时,为tr和td添加class属性。

接着是点击按钮执行语句:

submitBtn.onclick = function () {

                        // 获取选中 的元素所在行中从哪一列到哪一列
                        //循环遍历选中的单元格,并保存为数组
                        // 定义一个二维数组
                        var selectedall = [];
                        var selectedTrs1 = tbody[0].getElementsByClassName('selected1');
                        // console.log(selectedTrs1);
                        for (let i = 0; i < selectedTrs1.length; i++) {
                            var selectedTds = selectedTrs1[i].getElementsByClassName('highlight1');
                            // console.log(selectedTds[0]);
                            var selectedCells = [];
                            // console.log(i);
                            for (let j = 0; j < selectedTds.length; j++) {
                                // console.log(j, selectedTds[j].innerHTML);
                                selectedCells.push(selectedTds[j].innerHTML);
                            }
                            selectedall.push(selectedCells);
                        }
                        console.log(selectedall);//这个使选中的数据,发送给后端
                        
                    }

一定要记得,按钮是要重复性点击的,所以在按钮点击事件的最后要删除自己定义的class类名才可以。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值