HTML文档的计算问题

OKJSJSF · 发表于 2024-10-12 07:55

所以，通过对不同级别父元素的事件代理，监听个别元素或执行不同目的时可以用switch(target.id){case 'ID表达式': ...}，监听同类元素执行相同目的时可以用if(target.matches('类标签')){...}。

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

通讯录应该有搜索功能，下面是最简单的代码。
<body>
<input type="text" id="searchinput" placeholder="请输入关键字...">
<ul id="itemlist">
<li>姜子芽 4911229</li>
<li>王子平 4990026</li>
<li>姜是辣 1234567</li>
</ul>
</body>

<script>
document.getElementById('searchinput').addEventListener('keyup',function(e){
const searchtext=e.target.value.toLowerCase();
const items=document.getElementById('itemlist').getElementsByTagName('li');
Array.from(items).forEach(function(item){
const text=item.textContent;
const match=text.toLowerCase().indexOf(searchtext)>-1;
item.style.display=match ? '': 'none';
})
});
</script>

OKJSJSF · 发表于 2024-10-17 00:00

<!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>折叠文档搜索练习2</title>
</head>

<body>
<button type="button" id="toggl">1菜单模式</button>
<input type="text" id="searchinput" placeholder="...请输入欲搜索的姓名或电话的部份或全部..." style="width: 275px;display:none;"></input>
<ul>
<details name="only1" class="only1">
<summary>峡口支行</summary>
<li>林某 1234566</li>
<li>陆峰 222223</li>
<li>姜是辣 1234567</li>
</details>
</ul>
<ul>
<details name="only1" class="only1">
<summary>石门支行</summary>
<li>吴云 4911228</li>
<li>郑燕 4990020</li>
<ol>
<details name="only2" class="only2">
<summary>二级标题</summary>
<li>我是谁</li>
</details>
</ol>
<li>姜是辣 1234568</li>
</details>
</ul>
</body>

<script>
let idb=document.getElementById('toggl');
idb.addEventListener('click',myf1,false);
function myf1(){
if(idb.innerHTML=='1菜单模式'){
document.getElementById('toggl').innerHTML='2搜索模式';
idb.innerHTML=document.getElementById('toggl').innerHTML;
document.querySelectorAll('details').forEach(details=>{details.removeAttribute('name')});
document.getElementById('searchinput').style.display ='block';
}
else{
document.getElementById('toggl').innerHTML='1菜单模式';
idb.innerHTML=document.getElementById('toggl').innerHTML;
document.querySelectorAll('.only1').forEach(details=>{details.setAttribute('name','only1')});
document.querySelectorAll('.only2').forEach(details=>{details.setAttribute('name','only2')});
document.querySelectorAll('details').forEach(details=>{details.open=false});
document.getElementById('searchinput').style.display ='none';
}
}

document.getElementById('searchinput').addEventListener('keyup',myf2,false);

function myf2(event){
const searchtext=event.target.value.toLowerCase();
const lielements=document.querySelectorAll('li');
lielements.forEach(lielement=>{
const litext=lielement.textContent.toLowerCase();
const boolern=litext.includes(searchtext);
let parent=lielement.parentElement;
while(parent && parent.tagName !=='DETAILS'){parent=parent.parentElement;};
if(parent){parent.open =boolern;};
}
</script>

</html>

OKJSJSF · 发表于 2024-10-17 00:08

本帖最后由 OKJSJSF 于 2024-10-17 20:51 编辑

前面的代码是为了给折叠展开功能的文档比如电话簿增加搜索功能。由于只能展开一个子菜单，所以使用搜索框功能时用代码删除details的name属性，可以展开所有重复的姓名或号码。用按钮控制切换启用搜索框与禁用搜索框。切换到禁用搜索框时恢复details的name属性。前面的代码搜索框监听keyup功能有误，导致切换功能无效。

OKJSJSF · 发表于 2024-10-17 20:46

<!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>折叠文档搜索练习2</title>
</head>

<body>
<button type="button" id="toggl">启用输入框</button>
<input type="text" id="searchinput" placeholder="...请输入欲搜索的姓名或电话的部份或全部..." style="width: 275px;" disabled>
<ul>
<details name="only1" class="only1">
<summary>峡口支行</summary>
<li>林某 1234566</li>
<li>陆峰 222223</li>
<li>姜是辣 1234567</li>
</details>
</ul>
<ul>
<details name="only1" class="only1">
<summary>石门支行</summary>
<li>吴云 4911228</li>
<li>郑燕 4990020</li>
<ol>
<details name="only2" class="only2">
<summary>二级标题</summary>
<li>我是谁</li>
</details>
</ol>
<li>姜是辣 1234568</li>
</details>
</ul>
</body>

<script>
let idb=document.getElementById('toggl');
idb.addEventListener('click',myf1,false);
function myf1(){
if(idb.innerHTML=='启用输入框'){
document.getElementById('toggl').innerHTML='禁用输入框';
idb.innerHTML=document.getElementById('toggl').innerHTML;
document.querySelectorAll('details').forEach(details=>{details.removeAttribute('name')});
document.getElementById('searchinput').disabled=false;
document.getElementById('searchinput').focus();
}
else{
document.getElementById('toggl').innerHTML='启用输入框';
idb.innerHTML=document.getElementById('toggl').innerHTML;
document.querySelectorAll('.only1').forEach(details=>{details.setAttribute('name','only1')});
document.querySelectorAll('.only2').forEach(details=>{details.setAttribute('name','only2')});
document.querySelectorAll('details').forEach(details=>{details.open=false});
document.getElementById('searchinput').disabled=true;
}
}

document.getElementById('searchinput').addEventListener('keyup',myf2,false);
/*function myf2(event){
const searchtext=event.target.value.toLowerCase();
const lielements=document.querySelectorAll('li');
lielements.forEach(lielement=>{
const litext=lielement.textContent.toLowerCase();
const booler=litext.includes(searchtext);
let parent=lielement.parentElement;
while(parent && parent.tagName !=='details'){parent=parent.parentElement;};
if(parent){parent.open=booler;};
}*/
</script>

</html>

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

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