写个近况。 最近一个需要谕知全公司的人知道的东西，是好几个 EXCEL 档，每个档里头各有一些栏位资料，大致上是 A<->B 间的 对照，而 A 有 A1, A2, ... 等栏位，B 有 B1, B2, .. 等 栏位。 这时，比方我想查的东西，刚好分散在好几个 EXCEL 档里头 ，查起来很麻烦，用 javascript 会简单很多: 1.这些档都另存 .csv 2.写一支 htm 档，开头就去读取这些 .csv 的东西，存成一 个叫做 tmps 的字串阵列，每个元素都是每个 csv 档的每一 行: var tmps=[]; var fso=new ActiveXObject("filesystemobject"); for(i=0;i<dirs.length;i++) { f=fso.OpenTextFile("D:\\"+i+".csv"); csv=f.ReadAll(); f.close(); tmps.push(csv.split("\n")); } 这样 tmps 就是我要的全域变数 通常 tmps 还可以 tmps.sort(); 一下 3.宣告两个全域变数 var data1={}; var data2={}; data1 用来储存 A 资料的各栏位，使用 mapping 的储存格 式，比方其资料结构如下 data1[A1][A2][A3]... 它的做法很单纯，就是去对每一个 tmps[i] 做必要的拆解: for(i=0;i<tmps.length;i++) { ab=tmps[i].split("A资料与B资料间的分隔字串"); // 这样 ab[0] = A资料, ab[1] = B资料 // 先处理 data1 a=ab[0].split("\t"); if(typeof(data1[a[0]])=="undefined") data1[a[0]]={}; if(typeof(data1[a[0]][a[1]])=="undefined") data1[a[0]][a[1]]={}; . . // 再处理 data2 b=ab[1].split("\t"); if(typeof(data2[b[0]])=="undefined") data2[b[0]]={}; if(typeof(data2[b[0]][b[1]])=="undefined") data2[b[0]][b[1]]={}; . . } 4.有了 tmps 及 data1、data2，就可以很简单的做下拉式 查询介面，既可由 A 查 B，也可由 B 查 A。例如使用者 想由 A 查 B，它下拉了 A1、A2、A3 三项，然後按下查 询按纽，该按纽 on_click='search_a_b();' function search_a_b() { s1=document.getElementById("s1").value; s2=document.getElementById("s2").value; s3=document.getElementById("s3").value; // 当然实际不会这样写，这里只是简单说明 // 产生比对用字串 ss=s1+"\t"+s2+"\t"+s3; // 然後去跟 tmps 里面的每一笔做比对 str=""; for(i=0;i<tmps.length;i++) { ab=tmps[i].split("A资料与B资料间的分隔字串"); // 因为是由 A 查 B 所以比对目标放在 ab[0]; if(ab[0].indexOf(ss)==-1) continue; // 比对到符合的 str+=tmps[i].replace(/\t/g,"&emsp;")+"<BR>"; } document.write(str); } 它会将所有符合该三项下拉选项的结果都列出来，比方 A 资料 其实有 A1~A5 五个可下拉项，使用者只下拉前三个时，它就把 只要符合前三项即可的都列出来。 例如说，以异特龙为例，牠所属的界、门、纲如下 界： 动物界 门： 脊索动物门 纲： 蜥形纲 牠所属的目、科、属如下 总目： 恐龙总目 目： 鸟臀目 科： 剑龙科 亚科： 剑龙亚科 属： 剑龙属 名字： 异特龙 那前面的界门纲就相当於 A 资料，目科属就相当於 B 资料。 那比方我要由 A 查 B，分别下拉动物界、脊索动物门、蜥形纲， 按下查询，那它就应该要显示的资料: 动物界 脊索动物门 蜥形纲 ←→ 恐龙总目 鸟臀目 剑龙科 剑龙亚科 剑龙属 异特龙 上面的 ss 变数就是 "动物界\t脊索动物门\t蜥形纲"，它就会去 比对每一个 tmps[i] 里头的字串，有没有跟 ss match 的，有的 话，就把该行 document.write 出来。 则这时假设我只下拉前两个，它自然会把所有有符合前两个的都列 出，例如光脊索动物门就又有很多分支: https://i.imgur.com/Zv0coMN.jpg 我写好这个东西後，把 htm 档丢到公司内网再告知同单位的同事 有这个东西，则只要知道这东西的人，就不用再去 EXCEL 一个一 个点开来看，只要透过该 htm 的查询介面，即可轻松查询出想知 道的结果，而且可透过这样的综览，明确知道公司想告诉我们的事 它日後的更新也很方便，每一次的更新就是夹带一些 EXCEL 档， 将它们指定目录另存 .csv，大概一两分钟吧就通通另存完毕，然 後 htm 查询介面就能查到最新的结果。 进一步来说，还可以写树状显示，这个利用 mapping 及 <table> 标签的容许弹性来做即可，以资料A 的树状结构为例:" str="<table>"; a1=Object.keys(data1); for(i1=0;i1<a1.length;i1++) { str+="<tr><td>"+a1[i1]+"</td></tr>"; a2=Object.keys(data1[a1[i1]]); for(i2=0;i2<a2.length;i2++) { str+="<tr><td></td><td>"+a2[i2]+"</td></tr>"; a3=Object.keys(data1[a1[i1]][a2[i2]]); for(i3=0;i3<a3.length;i3++) { str+="<tr><td></td><td></td><td>"+a3[i3]+"</td></tr>"; . . } } } // 表格的好处就是每一行累加字串最後只要有 </tr> 就不会出错 str+="</table>"; document.write(str); 这样出来的资料就类似 xx1 xx11 xx111 xx112 . . xx12 xx121 xx122 xx1221 xx1222 . . xx123 . . . . xx2 xx21 xx211 . . 即全部的资料依树状的方式显示於同一个 htm 页面，这时手动 按 ctrl-f 去看资料位在哪也是可以，进阶写法就透过展开按钮 对 style="display:none/block" 做切换，即可实现树状结构的 展开及缩回。 熟悉 mapping 的话，这些不用花多少时间就能写出来。 我的感触就是，要给全公司看的东西，原始资料不应该如此分散 ，这次的经验可应用在很多地方。 我目前仅剩一件事情令我觉得心烦，这个月要面对，希望能顺利 ，渡过了就没事了，应该会继续把 confarea.htm 完工。这东西 的缺点是无法写成线上网页，但如果放到 github 的话则大家都 可以下载，我蛮希望以後有人真的能下载然後利用它写圣殿的区 域。 其它没啥事，晚上预计做个备份。 LAechan --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.33.66.104 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/mud_sanc/M.1636624791.A.B47.html ※ 编辑: laechan (114.33.66.104 台湾), 11/11/2021 18:03:05 ※ 编辑: laechan (114.33.66.104 台湾), 11/11/2021 18:14:17 各有各的好处。 javascript 优点是不难学，语法较容易理解，常写也容易记住。 我最近新写的东西 https://sites.google.com/view/mystockmemo 我拿它当线上记事本使用。对我来说这实在很方便，即便是土法炼 钢刻程式码，只要方便就好其它我完全不在意。 ※ 编辑: laechan (114.33.66.104 台湾), 11/19/2021 23:35:02 它的好处就是 1.它实际上只是一个 .htm 档，所以能简单放在 google site 2.用记事本就能编辑，用任何浏览器都能开启 3.因为它实际上就一个档，所以放在手机里头也能开启，我不用 学写 APP 也能得到与 APP 一样的效果 4.当然它很阳春没办法很精致这受限於我的功力以及我用了多少 东西(比方 CSS、jQuery、React、...)，但我喜欢它的方便性 5.它很大满足了我的资料搜集癖，因为我能享受到搜集後的成果 ，也就是变成了可用的资讯。 我之前还有写一个东西，就是当我去日本时可以用到的 https://sites.google.com/view/appmathtest 它成功让我"临时"找到我想吃的餐馆，以及我的旅伴希望我帮忙 找的餐馆，都是很临时起意或临时要求的，这就是我想要的方便 性。 ※ 编辑: laechan (114.33.66.104 台湾), 11/24/2021 20:18:58 所有的网页都会显示於自己的google site页面 https://sites.google.com 忘记网址的话就进入该页面，看想点开的网页是哪一个， 就点进去，然後选检视模式就知道网址，像我就忘了上面 的京阪餐馆资料网页的网址，忘了就进该页面去打开再用 检视即可。 我目前有release过的还有以下 disney+片单查询 https://sites.google.com/view/disneyplusearch 名侦探柯南时间线(到82集左右) https://sites.google.com/view/conantimeline 日本各地区即时影像(不过我很久没更新它了) https://sites.google.com/view/japanlivecams 圣殿随机地图产生器 https://sites.google.com/view/randomapv1 BGD台版团员资料(这个也很久没更新了) https://sites.google.com/view/bgdtwcardv1 BGD 2020 vote(又快要年终投票了) https://sites.google.com/view/bgd2020vote 我实际上记不了这麽多网址的。 ※ 编辑: laechan (114.33.66.104 台湾), 11/28/2021 08:03:41