当前位置: 首页 > 工具软件 > jExcel > 使用案例 >

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

瞿兴朝
2023-12-01

在使用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类名才可以。

 类似资料: