js简单的表格添加行和删除行操作示例
2014-03-31 00:00
831 查看
<html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(function(){ //绑定添加行按钮的单击事件 $("#addrow").bind("click",function(){ // 取得table var tab = $("#tab"); // 创建tr元素 var tr = $c("tr"); // 为table追加tr元素 tab.append(tr); // 创建td元素 var td1=$c("td"); // td元素的内容 td1.innerHTML="insert1"; // 为新追加的tr追加td元素 tr.appendChild(td1); var td2=$c("td"); td2.innerHTML="insert2"; tr.appendChild(td2); }); // 绑定删除行按钮的单击事件 $("#deleterow").bind("click",function(){ // 取得table的第一行 var tab = $("#tab tr:eq(0)"); // 删除此行 tab.remove(); }); }); </script> </head> <body> <table border='1' id="tab"> <tr> <td>123</td> <td>456</td> </tr> </table> </br> <button id="addrow">添加行</button> <button id="deleterow">删除行</button> </body> </html>
相关文章推荐
- js简单的表格添加行和删除行操作.
- JS实现简单表格排序操作示例
- 原生JS操作网页给p元素添加onclick事件及表格隔行变色
- JS实现的添加弹出层并完成锁屏操作示例
- js操作DOM--添加、删除节点的简单实例
- javascript 表格内容排序 简单操作示例代码
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS 删除添加表格的行操作
- JS简单添加元素新节点的方法示例
- js操作DOM--添加、删除节点的简单实例
- js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)
- js简单的表格添加行和删除行操作示例
- JS简单实现表格排序功能示例
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS简单实现获取元素的封装操作示例
- Vue.js添加组件操作示例
- js操作表格的一些简单方法
- JS实现数组简单去重及数组根据对象中的元素去重操作示例
- JS简单实现动态添加HTML标记的方法示例
- JS实现为动态创建的元素添加事件操作示例