html男女性别图片,添加一个男女性别的点击事件,配图,帮忙看看加在那个地方,怎么改。- -...

该代码示例展示了如何使用JavaScript实现一个功能,即在用户输入姓名并点击按钮后,根据输入的姓名和性别(男/女)筛选HTML表格中的数据,只显示匹配的行。它通过获取元素、处理输入的姓名(去除空格并转换为小写),然后遍历表格以隐藏不匹配的行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

window.onload = function(){

var btn = document.getElementById("btn");

var table = document.getElementById("firstTable");

var tbody = table.tBodies[0];

btn.onclick = function(){

// 取得姓名值

var name = document.getElementById("name").value.toLowerCase();

var patten = /\s+/igm;

var nameArray = name.split(patten);

console.log(nameArray);

// 对tbody中的每一行进行循环

for (var i = 0; i 

var inputTxt = tbody.rows[i].cells[1].innerHTML.toLowerCase();

tbody.rows[i].style.display = "none";

// 对我们输入的搜索条件进行循环

for (var j = 0; j 

if(inputTxt.indexOf(nameArray[j]) != -1){

tbody.rows[i].style.display = "table-row";

}

}

}

}

}

62a382008bd2fb362a1f25deaa66a7a7.png

cc60f57cdfdc0c6df73205acd203cbad.png

a90829b8751c7b4f1378fb86cf3faacc.png

就是点击男的时候只出现男的,点女选项的时候就出现女的,帮帮忙。。- -

html

Table

table {

border:1px solid #9e9e9e;

border-collapse: collapse;

width: 500px;

}

tr,th,td {

border:1px solid #9e9e9e;

text-align: center;

}

select{

}

请输入姓名:

性别

id号姓名年龄性别操作

1张三20男删除2张明28女删除3陈赛38女删除4king18男删除5许佳8女删除6张三8男删除
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值