<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. sys.stdin的三种方式

    1. for line in sys.stdin: import sys sys.stdout.write('根据两点坐标计算直线斜率k,截距b:\n') for line in sys.stdin: ...

  2. PCA和LDA降维的比较

    PCA 主成分分析方法,LDA 线性判别分析方法,可以认为是有监督的数据降维.下面的代码分别实现了两种降维方式: print(__doc__) import matplotlib.pyplot as ...

  3. 整理sqlserver 级联更新和删除 c#调用存储过程返回值

    整理一下级联更新和删除 c#调用返回值 use master go IF exists(select 1 from sysdatabases where name='temp') BEGIN DROP ...

  4. php 利用socket发送GET，POST请求

    作为php程序员一定会接触http协议,也只有深入了解http协议,编程水平才会更进一步.最近我一直在学习php的关于http的编程,许多东西恍然大悟,受益匪浅.希望分享给大家.本文需要有一定http ...

  5. Implementing SQL Server Row and Cell Level Security

    Problem I have SQL Server databases with top secret, secret and unclassified data.  How can we estab ...

  6. [BZOJ1070][SCOI2007]修车（最小费用最大流）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1070 分析: 把每个工人拆成N个点.记为A[i,j]表示第i个工人修倒数第j辆车. 每 ...

  7. 大型网站系统架构实践（五）深入探讨web应用高可用方案

    从上篇文章到这篇文章,中间用了一段时间准备,主要是想把东西讲透,同时希望大家给与一些批评和建议,这样我才能有所进步,也希望喜欢我文章的朋友,给个赞,这样我才能更有激情,呵呵. 由于本篇要写的内容有点多 ...

  8. 3、面向对象以及winform的简单运用（类的初步认识）

    什么是类? “类”是面向对象编程的基本单元,一个类一般包含两种成员:字段和方法——即变量和函数. 例: //字段或变量的定义 public int age; //方法或函数的定义 public int ...

  9. Bootstrap3.0学习第十九轮(JavaScript插件——标签页)

    详情请看 http://aehyok.com/Blog/Detail/46.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  10. 百度地图 api 功能封装类 (ZMap.js) 新增管理事件功能 [源码下载]

    ZMap 功能说明 ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地 ...