这篇文章主要介绍了 js 简单的表格添加行和删除行操作, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <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>
来源: