您正在使用 IPV4 [3.234.244.181] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 劳动节 006
2024年 端午节 046
2025年 元 旦 251
2025年 春 节 279
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
html table+css实现可编辑表格的示例代码
内容摘要: !DOCTYPEhtmlhtmlheadstyletable{border-collapse:collapse;width:100%;}th,td{border:1pxsolidblack;padding:8px;text-align:left;}/style/headbodytableid='editableTable'theadtrthName/thth......
<!DOCTYPEhtml>

<html>

<head>

<style>

table{

border-collapse:collapse;

width:100%;

}

th,td{

border:1pxsolidblack;

padding:8px;

text-align:left;

}

</style>

</head>

<body>

<tableid="editableTable">

<thead>

<tr>

<th>Name</th>

<th>Age</th>

<th>Gender</th>

</tr>

</thead>

<tbody>

<tr>

<tdcontenteditable="true">JohnDoe</td>

<tdcontenteditable="true">25</td>

<tdcontenteditable="true">Male</td>

</tr>

<tr>

<tdcontenteditable="true">JaneSmith</td>

<tdcontenteditable="true">30</td>

<tdcontenteditable="true">Female</td>

</tr>

<!--添加更多行-->

</tbody>

</table>

<script>

//获取可编辑表格

vartable=document.getElementById('editableTable');

//遍历表格,为每个单元格添加事件侦听器

for(vari=0;i<table.rows.length;i++){

for(varj=0;j<table.rows[i].cells.length;j++){

table.rows[i].cells[j].addEventListener('input',function(){

//处理输入事件,可以在此处进行逻辑处理或保存数据

console.log(this.textContent);

});

}

}

</script>

</body>

</html>

在上述示例中,使用了contenteditable属性来使表格单元格可编辑。添加contenteditable="true"属性的单元格可以被鼠标点击并接受用户输入。

JavaScript部分遍历表格的所有单元格,并为每个单元格添加输入事件侦听器。在输入事件处理程序中,你可以根据需要处理用户的输入,比如更新数据或触发其他操作。

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:css实现li中文本超出行宽自动隐藏

 

下一篇:CSS设置水平垂直居中的7种方法

发布日期:2024/3/13
手机扫二维码直达本页
发布时间:21:52:46
点  击:43
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,奇安信网站卫士提供加速防护
运行时间载入中.....