js动态控制表单表格
2024-10-11 16:20:00
js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列。
直接放代码:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<table id="tabl" border=1 cellpadding=10 cellspacing=0>
<thead bgcolor="#00B3FF">
<tr>
<td>姓名</td>
<td>联系方式</td>
</tr>
</thead>
<tbody>
<tr>
<td>孟小伟</td>
<td>686898</td>
</tr>
<tr>
<td>静妹妹</td>
<td>686898</td>
</tr>
<tr>
<td>臭猪 </td>
<td>686898</td>
</tr>
</tbody>
</table>
<!--表单基础特别举例-->
<form>
<!--这里有个有趣的东西,for=“cao” ,然后后面的<input />添加id为cao,你点击这里的文字,会在input直接提示你输入-->
<p><label for="cao">名字是什么,点击我就可以到框框里面:</label><input type="text" id="cao" /></p>
</form>
<script>
window.onload = function() {
/*创建一行,执行chuang()函数*/
chuang();
/*删除一行,或者某一行一列,执行dete函数*/
dete();
function chuang() {
var tab = document.getElementById("tabl");/*取到要操作的对象*/
var tr = tab.insertRow(2);/*给其添加序号为2的行*/
var Ptext = new Array();/*创建文本节点组数*/
Ptext[0] = document.createTextNode("黑猪");
Ptext[1] = document.createTextNode("998342");
for(var i = 0; i < Ptext.length; i++) {/*遍历*/
var cd = tr.insertCell(i);/*按序号创建列*/
cd.appendChild(Ptext[i]);/*把文本节点添加到对应的列*/
}
}
function dete(){
var tab = document.getElementById("tabl");
tab.deleteRow(4);/*删除一行*/
tab.rows[3].deleteCell(1);/*删除某一行某一列*/
} }
</script>
</body> </html>
最新文章
- C# 操作excel单元格居中
- 父元素与子元素之间的margin-top问题
- JAVA基础拾遗-论线程池的线程粒度划分与深浅放置
- wc2016总结
- 1069 Nim游戏
- MVC开发过程中的疑难杂症
- JSOI2007建筑抢修
- iOS之FMDB 转载
- C++ txt文档读取
- 第k大数问题
- java中HashSet实现(转)
- Nginx修改配置实现图片防盗链
- js实现class样式的修改、添加及删除的方法
- cordova 插件开发
- Windows 配置nginx服务器 运行php项目
- Codeforces 585D Lizard Era: Beginning
- [转]使用keepalived搭建主备切换环境
- oracle 基本信息
- 对于Android开发,啥是高级工程师?
- Codeforces 937.D Sleepy Game
热门文章
- 关于 redis的操作
- 仿B站项目(4)webpack打包第三方库jQuery
- 学生管理系统(springMVC)
- IDEA 图标介绍。 缓存和索引介绍、清理方法和Debug使用
- Docker - 常用基础命令
- Linux学习笔记之六————Linux常用命令之系统管理
- Python:SQLMAP参数中文解释
- Linux编程 8 (挂载mount,查看磁盘df du,搜索grep,压缩zgip,归档tar)
- 如何优化Mysql千万级快速分页,limit优化快速分页,MySQL处理千万级数据查询的优化方案
- java ee期末项目相关