<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. Linux常用指令---find | locate(查找)

    1.locate locate指令和find找寻档案的功能类似,但locate是透过update程序将硬盘中的所有档案和目录资料先建立一个索引数据库,在 执行loacte时直接找该索引,查询速度会较快 ...

  2. [译]Python编写虚拟解释器

    使用Python编写虚拟机解释器 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环 ...

  3. 使用iScroll实现上拉或者下拉刷新

    上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...

  4. Cordova开发总结(插件篇）

    最近刚刚做完一个用Cordova开发了一款电子商务的应用.在选用Cordova前,我有考察过,国内的Appcan, Apicloud等等的解决方案.其实Appcan,ApiCloud的混合方案挺完整的 ...

  5. Django1.8教程——从零开始搭建一个完整django博客（二）

    在上一节中,我们已经创建了一个Django模型Post,并使Post模型与数据库同步.这一节中,我们将介绍Django管理站点,通过Django管理站点来管理我们创建的Post模型实例. 为你的模型创 ...

  6. 封印术：shadow dom

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<鼠标滚动插件smoovejs和wowjs> 作者主页:myvin 博主QQ:851399101(点击Q ...

  7. PHP中的日期加减方法示例

    几乎所有从事程序开发的程序员都遇到时间处理问题,PHP开发也一样,幸运的是PHP提供了很多关于日期时间函数.只要经常使用这些函数,搭配使用,日期时间处理上就熟能生巧了. 今天要讲的这个例子,需求是这样 ...

  8. 转-JS子窗口创建父窗口操作父窗口

    Javascript弹出子窗口  可以通过多种方式实现,下面介绍几种方法 (1) 通过window对象的open()方法,open()方法将会产生一个新的window窗口对象 其用法为: window ...

  9. Jquery-控制table的奇偶数色列

    css代码 <style> .even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF990 ...

  10. dict内部方法

    代码: #dict内部方法 vdic={'name':'kamil','age':23} print(dir(vdic)) vdic1 = vdic.copy()#copy(self):浅拷贝 pri ...