<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. (OAF)jdeveloper集成log4j并将日志输出到指定文件并写入数据库

    参考: How to configure Log4j in JDev 11g Ever wanted to use log4j in your adf project ? Well though Or ...

  2. 找不到类型{0} 它在 ServiceHost 指令中提供为 Service 特性值

    由于我把binding改成wsHttpBinding,在web.config里也改了命名空间 services的类名也改成了跟 web.config对应的命名空间后 在添加引用后,出现了错误: “找不 ...

  3. Ubuntu Navicat正版永久使用方法

    最近技安不再带自己的mac book来公司工作了,公司多出来一个台式机,配置还挺高.于是乎就拿过来用了. 装上了Ubuntu14.04 LTS版,正常的开发工具如vagrant,vitualbox,s ...

  4. 20135316王剑桥 linux第五周课实验笔记

    4.1.1程序员的可见的状态 ———— Y86的每条指令都会读取或修改处理器状态的某些部分,称为程序员可见状态.如图1所示. 1.程序寄存器(Program registers): %eax, %ec ...

  5. 讲述一下自己在linux中配置ftp服务的经历

    本人大二小白一名,从大一下学期就开始接触到linux,当时看到学校每次让我们下载资源都在一个ftp服务器中,感觉特别的高大上,所以自己就想什么时候自己能够拥有自己的ftp服务器,自己放一点东西进去,让 ...

  6. EF，MVC相关项目请参见→

    End_Test和YM_EF抽象工厂   这两个项目

  7. 在eclipse中安装插件

    1.在Eclipse中菜单help选项中选择install new software选项, 2.在work with 栏中输入 http://download.eclipse.org/releases ...

  8. XMLHttpRequest的POST中文表单问题解决方案

    XMLHttpRequest的POST中文表单问题解决方案 由于XMLHttpRequest POST的内容是用UTF-8编码,所以在服务端要先把request的编码改为UTF-8. 而且客户端pos ...

  9. Java sun的JDK

    JDK概述 JDK(Java Development Kit)是Sun Microsystems针对Java开发员的产品.自从Java推出以来,JDK已经成为使用最广泛的Java SDK(Softwa ...

  10. Tomcat server.xml详解

    Server.xml的结构大致 <Server port="8005" shutdown="SHUTDOWN"> <Service name= ...