<html>
<head>
<title>js操作表格</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
table{
margin: auto;
margin-top: 20px;
}
tr{
height: 40px;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//实现修改功能
function updateCount(btn){
//获取要修改的td元素对象
//获取要修改内容所在的行对象
var tr=btn.parentNode.parentNode;
//获取该行下的所有单元格对象数组
var cs=tr.cells;
//获取要修改的单元格对象
var td=cs[3];
//修改单元格内容为文本框
if(!isNaN(td.innerHTML)){
td.innerHTML="<input type='text' value='"+td.innerHTML+"' onblur='saveCount(this)' />";
}
}
//保存数据
function saveCount(inp){
//获取要修改的单元格对象
var td=inp.parentNode;
//修改数量
td.innerHTML=inp.value;
}
//删除行
function delRow(btn){
if(window.confirm("你确定要删除吗?")){
//获取要删除的行
var tr=btn.parentNode.parentNode;
//获取表格对象
var ta=document.getElementById("ta");
//删除行,注意获取当前行的角标。
ta.deleteRow(tr.rowIndex);
}
}
/*---------------------js操作多选框--------------------------------------*/
//全选
function chooseAll(){
//获取全选的checkbox对象
var ch=document.getElementById("ck");
//获取所有的che
document操作表格元素
最新推荐文章于 2024-02-22 15:19:50 发布
这篇博客主要探讨了如何使用Document Object Model(DOM)来操作HTML表格元素,包括创建、修改和遍历表格行、列和单元格的方法。内容涵盖了动态添加、删除表格数据,以及通过JavaScript进行样式调整等技巧。
摘要由CSDN通过智能技术生成