<html>
<head>
<title>Table对象的方法</title>
<script language="JavaScript">
var intRowIndex = 0;
function insertRow(tbIndex){
   var objRow = myTable.insertRow(tbIndex);
   var objCel = objRow.insertCell(0);
   objCel.innerText = document.myForm.myCell1.value;
   var objCel = objRow.insertCell(1);
   objCel.innerText = document.myForm.myCell2.value;
   objRow.attachEvent("onclick", getIndex);
   objRow.style.background = "pink";
}
function deleteRow(tbIndex){
   myTable.deleteRow(tbIndex);
}
function getIndex(){
   intRowIndex = event.srcElement.parentElement.rowIndex;
   pos.innerText = intRowIndex;
}
</script>
</head>
<body onload="pos.innerText=intRowIndex;">
<h2>Table对象的方法</h2>
<hr>
当前位置 : <span id="pos"></span>
<table id="myTable" border=1>
<tr onclick="getIndex()">
   <td>HTML</td>
   <td>CSS</td>
</tr>
<tr onclick="getIndex()">
   <td>JavaScript</td>
   <td>VBScript</td>
</tr>
</table>
<form name="myForm">
第一栏 : <input type="text" name="myCell1" value="CGI"><br>
第二栏 : <input type="text" name="myCell2" value="ASP"><br>
<input type="button" onclick="insertRow(intRowIndex)" value="插入行">
<input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
<input type="button" onclick="insertRow(myTable.rows.length);" value="添加行">
</form>
</body>
</html> 

动态插入、添加删除表格行的JS代码的更多相关文章

  1. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  2. 添加删除表格append或 createElement

    方法一: js代码:增加一行五列的表格 function AddList(){ $len= document.getElementsByName('goods_name[]').length; obj ...

  3. js回车动态添加表格,右键动态删除表格行

    <script type="text/javascript" language="javascript">//屏蔽浏览器右键function sto ...

  4. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  5. Android LayoutInflater 动态地添加删除View

    我想实现点击一个按钮(或其他的事件)添加或删除View,网上找到了LayoutInflater这个类. 下面是我自己一些经验: android官网上LayoutInflater的API:http:// ...

  6. jquery删除表格行

    $(".mingxirmspan").click(function(){ $(this).closest("tr").remove(); })

  7. 8 行 Node.js 代码实现代理服务器

    接触 Node.js 已有多年,一直喜欢它的单线程模型和异步IO特性,以及 JavaScript 语言本身的灵活性.同时,JavaScript 前后端通吃,在全栈开发领域具有独特的优势.今天就来看看作 ...

  8. 利用SpringMVC参数绑定实现动态插入数据

    javabean代码:public class User { private String firstName; private String lastName; public String getF ...

  9. 编辑 Ext 表格(一)——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

随机推荐

  1. Docker Registry服务启动过程浅析

    当我们pull一个registry镜像或者自己制作一个镜像之后,使用命令docker run -d -p 5000:5000 registry,就可以启动一个私有容器服务,那么究竟是怎么做到的呢? 首 ...

  2. LeetCode 168. Excel Sheet Column Title

    Given a positive integer, return its corresponding column title as appear in an Excel sheet. -> A ...

  3. iOS不得姐项目--封装状态栏指示器(UIWindow实现)

    一.头文件 #import <UIKit/UIKit.h> @interface ChaosStatusBarHUD : NSObject /** 显示成功信息 */ + (void)sh ...

  4. ndk学习5: ndk中使用c++

    默认情况下ndk不支持标准C++库,异常, rtti等   在ndk文档有关于C++ support的详细介绍   一. 使用C++标准库 介绍: 默认是使用最小额度的C++运行时库, 在Applic ...

  5. Android之使用Android-AQuery异步加载图片(一)

    第一节:转载地址(http://www.cnblogs.com/lee0oo0/archive/2012/10/25/2738299.html) // 必须实现AQuery这个类 AQuery aq ...

  6. POJ 2082 Terrible Sets

    Terrible Sets Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 2747   Accepted: 1389 Des ...

  7. openfire控制台登录不了的解决

    不知道为什么,openfire服务器后台,发生几次密码都登录不上去的问题,密码肯定没错,第一次就是默认的用户名:admin,密码:admin,然,第三天,说我密码错误,后来重装软件才弄好, 然后又发生 ...

  8. js正则及常用方法函数总结

    正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用,web开发本质上是处理字符串(服务端接受请求处理后拼接字符串作为响应,这在早期的CGI编程中最明显,然后客户端解析字符串进行渲 ...

  9. Mongodb(3)插入文档,更新文档,删除文档

    insert() 方法 要插入数据到 MongoDB 集合,需要使用 MongoDB 的  insert() 或 save() 方法. 插入文档:db.COLLECTION_NAME.insert(d ...

  10. (medium)LeetCode 207.Course Schedule

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...