<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. ORACLE SELECT INTO NO_DATA_FOUND问题

    存储过程中使用了类似如下语句: SELECT col INTO v_col FROM t_table 当查询不到记录时,会出现“数据未发现”的异常 解决方法: (1)使用MAX函数 SELECT MA ...

  2. java中的静态代码块、构造代码块、构造方法

    运行下面这段代码,观察其结果: package com.test; public class HelloB extends HelloA { public HelloB() { } { System. ...

  3. IT男的”幸福”生活"续8

    有段时间没写了,还是有点怀念的.   生活不记录下,怕真地会忘.. 以往的种种,时时刻刻回荡在我的脑海中,  最近看着孩子生活照, 猛得回首我便回了到了 续8. …… 坐在回去的公交车上,看着前面两M ...

  4. 用html5+js实现掌机游戏赛车demo

    最近无聊,用html5+js做了一个以前玩过的掌机赛车游戏,顺便学习一下画布的api以及巩固一下js基础. 游戏界面,没做什么美化. 游戏规则:游戏界面分为三列,黑色方块随机落下,红色方块可以在三列自 ...

  5. Android--手持PDA读取SD卡中文件

    近两年市场上很多Wince设备都开始转向Android操作系统,最近被迫使用Android开发PDA手持设备.主要功能是扫描登录,拣货,包装,发货几个功能.其中涉及到商品档的时候大概有700左右商品要 ...

  6. NuGet更新引用Dll

    第一种 通过 "Add Library Package Reference..." 添加 点击 ‘Add Library Package Reference...’ , 搜索你要添 ...

  7. [BZOJ1876][SDOI2009]superGCD（高精度）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1876 分析: 以为辗转相减会TLE呢……但是好像没这个数据……就这么水过去了…… 辗转 ...

  8. 21.C#序列过虑、排序、let子句和连接(十一章11.3-11.5)

    哈哈,隔了一个星期,再怎么样都要发一篇,要多看书啊,书不能停~~~ 使用where子句进行过虑 where子句的语法格式如下:where 过虑表达式 例子:新建一个珠宝类,如下: class Jewe ...

  9. Linq之Expression高级篇（常用表达式类型）

    目录 写在前面 系列文章 变量表达式 常量表达式 条件表达式 赋值表达式 二元运算符表达式 一元运算符表达式 循环表达式 块表达式 总结 写在前面 首先回顾一下上篇文章的内容,上篇文章介绍了表达式树的 ...

  10. 1、面向对象以及winform的简单运用（开篇）

    面向对象概述: 要学习好面向对象,我们应该从三个问题入手: 1.什么是面向对象? 2.为什么要面向对象? 3.该怎么面向对象? 面向对象,首先要有一个对象,那么对象是什么呢? 对象的定义是人们要进行研 ...