HTML文档的计算问题

OKJSJSF · 发表于 2024-10-20 09:13

由于网页是固定的，搜索到匹配项后，可以直接写元素的各级父元素details展开的代码，由远及近，不必判断.

OKJSJSF · 发表于 2024-10-20 14:09

今天发现代码并未正确执行，只能搜索展开一个级别的菜单。昨晚示例因为二个级别内容有重复，搜索时二个级别都能展开。今于修改了内容，不能正常匹配展开。

OKJSJSF · 发表于 2024-10-20 14:11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度AI折叠搜索示例</title>
</head>

<body>
<input type="text" id="search" placeholder="搜索...">
<details><summary>一级菜单1</summary>
<ul>
<li>项目一</li>
<details><summary>二级菜单1</summary>
<ul>
<li>项目三</li>
<li>项目四</li>
</ul>
</details>
</ul>
</details>

<details><summary>一级菜单2</summary>
<ul>
<li>项目二</li>
</ul>
</details>

</body>
<script>
document.getElementById('search').addEventListener('input',function(){
const query=this.value.trim().toLowerCase();
const lis=document.querySelectorAll('li');
const details=document.querySelectorAll('details');
details.forEach(detail=>detail.open=false);
if(query===''){return;}
lis.forEach(li=>{
if(li.textContent.toLowerCase().includes(query)){
let detail=li.closest('details');
while(detail){
detail.open=true;
detail=detail.closest('details');
}
}
});
});
</script>
</html>

OKJSJSF · 发表于 2024-10-20 14:13

上面百度示例并不能正常执行搜索，搜索时网页会假死，必须关闭才能重新使用。假死的原因是最后的while循环语句。

OKJSJSF · 发表于 2024-10-26 13:59

休息了几天没弄，今天搜索功能完成了。匹配到的项目的多级父元素的表达式不能用一个一个的点号层层扩展，必须采用类或其他标志一次性获取。
document.getElementById('search').addEventListener('input',myf2,false);
function myf2(){
document.querySelectorAll('details').forEach(details=>{details.open=false});
const searcht=this.value.trim().toLowerCase();
const lis=document.querySelectorAll('ol');
if(searcht === ''){return;}
lis.forEach(li => {
if(li.textContent.toLowerCase().includes(searcht)){
li.closest('details.closeopen').open=true;
li.closest('details.closeopen2').open=true;
li.closest('details').open=true;
}
});
};

OKJSJSF · 发表于 2024-11-1 21:47

员工电话簿(样式1菜单在左兄弟元素展开).rar (2.42 KB, 下载次数: 1) 请家人们多提意见。自我感觉在阅读时这种Html文件比PDF图片文件好得多。

OKJSJSF · 发表于 2024-11-3 16:17

今天把一个有多级标题与标标题多级编号的word文档传到手机微信，打开后选择适应屏幕，离开微信打开其它应用，即”QQ浏览器文件服务“，可以看到按原先设置的标题样式等显示的文档内容。滑动屏幕，会弹出”目录“按钮，点击目录按钮，弹出一个很大的目录窗口，面积超过屏幕一半以上，点击其中的各个标题，会跳转至对应内容。但这个目录不显示标题的多级编号。

OKJSJSF · 发表于 2024-11-8 22:32

我的手机上Word的目录是展开的，不能折叠。

OKJSJSF · 发表于 2025-1-25 21:00

本帖最后由 OKJSJSF 于 2025-1-25 21:42 编辑

太多天没练时间练HTML了，今天抽空说几句话。我用的是华为手机NOVI，微信中的网页文件，在聊天窗口中或在文件传输助手窗口点击时，会弹出选择QQ浏览器并打开，但当存到收藏夹中时，就没用任何作用了，不会弹出引用浏览器的提示，无法打开使用。如果通过桌面电脑把HTML文件保存在手机的文件夹中，则会弹出引用浏览器的提示，可以打开使用。但我的手机微信聊天记录或文件传输助手中的文件却无法直接保存到手机文件夹中。哎，问题多多。

OKJSJSF · 发表于 2025-3-1 21:47

本帖最后由 OKJSJSF 于 2025-3-2 09:38 编辑

又开始设计一个表单计算器了。在文档中设二个表格t1与t2，第一个表格中有九个单选按钮input radio，name相同为group1，每行一个，id不同，按Excel的方法设置id，依次为t1b1,t1b2,t1b3,,,t1b9，位于表格第二列，默认未选中，第一列为序号。第二个表格有12个复选框，每行一个，id依次为t2b1,t2b2,t2b3,,,t2b12，位于表格第二列，默认未勾选，第一列为序号，第三列为参数常数（如id="t2c11"），第四列为计算结果。需求之一是：当选中表1第三个单选按钮，并且勾选表2第11个复选框时，执行运算，表2第四列第11行（id="t2d11"）显示计算结果，当选择其他单选按钮时或取消这个勾选时，计算结果显示为空。我的下面的代码无法正确运算：
      var t1bs=document.getElementsByName("group1");
      for(var i=0;i<t1bs.length;i++){t1bs.addEventListener("Change",function(){if(this.id==="t1b3" && this.checked && t2b11.checked){t2d11.value=t2c11;}else{t2d11.value="";}
                                                                                                                                                            }
                                                                                                                     )
                                                            };
不知错在哪？

用户名		自动登录	找回密码
密码			免费注册

[求助] HTML文档的计算问题