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