<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. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

  3. JS添加和删除表格行

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. Js实现动态添加删除Table行示例

    <table cellpadding="0" cellspacing="0" border="1" style="margi ...

  5. 添加删除表格（js完成）【自己实际项目】

    // 通过dom对象完成 注释掉了 /** function insertRows(){ var tempRow=0; var tbl=document.getElementById("di ...

  6. 数据字典的设计--3.首页添加删除表格（JS实现）

    页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...

  7. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  8. 添加删除表格append或 createElement

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

  9. Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

随机推荐

  1. JS 之性能优化(1)

    了解JS性能优化是学习前端必备的一项技能.下面就简单的列出几点: 1.注意作用域,避免全局查找. 访问全局变量比访问局部变量慢,是因为需要遍历作用域链,查找作用域链需要额外的时间.所以在一个函数中,将 ...

  2. JS 之继承

    ECMAScript继承是通过原型链来继承的.基本思想是利用原型来让一个引用类型继承另一个引用类型的属性和方法,使原型变为另一个对象的实例.通过原型链实现继承时,不能使用对象字面量创建原型方法,避免重 ...

  3. 一个因为粗心的Bug

    /** * 数据绑定,分页显示 */ private void updataMenu(final EditText search) { if(listwz==null) { return; } pag ...

  4. EL表达式 （详解）

    L表达式      1.EL简介 1)语法结构        ${expression} 2)[]与.运算符      EL 提供.和[]两种运算符来存取数据.      当要存取的属性名称中包含一些 ...

  5. 蓝牙技术BlueTooth

    转载网址:http://blog.csdn.net/dxdxsmy/article/details/7790568 蓝牙核心架构概念的理解请参考上面的网址.

  6. brew-cask之本地安装应用

    cask 固然好用,但是无奈很多资源在墙外,能下载的非常有限,就是能下载,也慢的要死.但是很多下载软件却可以下载这些资源,很奇怪,要么是有人FQ下载了,缓存到他们的服务器了,要么就是软件可以FQ下载. ...

  7. 编写高质量代码改善C#程序的157个建议[泛型集合、选择集合、集合的安全]

    前言   软件开发过程中,不可避免会用到集合,C#中的集合表现为数组和若干集合类.不管是数组还是集合类,它们都有各自的优缺点.如何使用好集合是我们在开发过程中必须掌握的技巧.不要小看这些技巧,一旦在开 ...

  8. 一篇让Java程序猿随时可以翻看的Oracle总结

    来源:http://www.cnblogs.com/bzx888/p/4820712.html 有关的语句和操作基本都是按照实战中的顺序来总结的,比如创建用户,建表,序列初始化,插入数据的顺序呢. 这 ...

  9. JMeter工具的使用-ForEach

    1,Add Thread group this detail information about this panel as below link http://jmeter.apache.org/u ...

  10. Android如何让真机显示debug log的调试信息

    真机默认是不开启debug log调试功能的,以前我一直用模拟器,模拟器默认是开启debug log调试功能的,那么如何让真机开启呢? 我用华为Ascend P6为例: 1.进入拨号界面,输入*#*# ...