玖叶教程网

需求:点击单元格，相关联的单元格会高亮如上图:渠道1可以支持运输至这些国家。

1，显示原始数据

select * from 点击单元格相关联的单元格会高亮;

2，创建第一张临时表显示渠道

create temp table aa as

select '<u class=渠道 data-states="'||group_concat(国家) ||'">'||渠道||'</u>' 渠道 from 点击单元格相关联的单元格会高亮 group by 渠道;

select group_concat(渠道,' ') 渠道 from aa;

3，创建自定义视图大洲和国家

select 大洲||'<hr><b class=country>'||replace(group_concat(distinct(国家)),',','</b><b class=country>')||'</b>' 国家 from 点击单元格相关联的单元格会高亮 group by 大洲;

4，新增css高亮的样式。

cli_add_css~b{padding:0.5em}

.high{background-color:yellow}

tr:hover{background-color:white};

5，新增JavaScript脚本，循环给每个渠道附加事件。这里，开始用a标签，结果classList.add("high")一直加不上背景色，但是alert有相应，百思不得其解，后来，发现是href=""加载了一次事件响应，把原来的add又恢复了，改成hre="#"问题解决。

不过，后来又改成b标签了。

cli_add_script~～

function add_class(class_name,v){

var eles=document.querySelectorAll(".country")

for(var i=0;i<eles.length;i++){

eles[i].classList.remove("high");

var t=eles[i].innerText

if(v.indexOf(t)!=-1){

eles[i].classList.add("high");

}

}

}

var chanels=document.querySelectorAll('.渠道');

var i=0;

for(i=0;i<chanels.length;i++){

chanels[i].index=i;

chanels[i].onclick=function(i){

var states=this.getAttribute("data-states");

add_class(".country",states)

for(var t=0;t<chanels.length;t++){

chanels[t].classList.remove("high")

}

this.classList.add("high")

}

}

～;