<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. PostgreSQL： 一种用于生成随机字符串的方法

    create or replace function random_string(integer) returns text as $body$ select array_to_string(arra ...

  2. 嵌入式Linux应用开发——Linux下的C编程基础

    一.markdown简单操作 1.标题 在文字开头加上 “#”,通过“#”数量表示几级标题. 通过在文字下方添加“=”和“-”,他们分别表示一级标题和二级标题. 2.块注释 通过在文字开头添加“> ...

  3. 对于AP中为什么有4个WEP KEY的分析

    这篇文章简要分析一下为什么有4个WEP KEY,及其中的一些原因. SPEC 用过AP的都知道,AP中有4个WEP KEY,但是为什么要设置4个呢,这个是WEP帧的格式决定的: 图中的keyid是2个 ...

  4. Jenkins进阶系列之——03parameterized-trigger插件

    说明:这个插件可以根据已经完成构建的结果,触发新Job或者传递参数. 官方说明:Parameterized Trigger Plugin 安装步骤: 系统管理→管理插件→可选插件→Build Trig ...

  5. .NET MVC控制器向视图传递数据的四种方式

    .NET MVC控制器向视图传递数据的四种方式: 1.ViewBag  ViewBag.Mvc="mvc"; 2.ViewData ViewBag["Mvc"] ...

  6. mysql使用基础 sql语句(一)

    csdn博文地址:mysql使用基础 sql语句(一)  点击进入 命令行输入mysql -u root -p,回车再输入密码,进入mysql. 终端命令以分号作为一条语句的结束,可分为多行输入,只需 ...

  7. 《TCP/IP详解卷1：协议》第3章 IP：网际协议（2）-读书笔记

    章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...

  8. web前端开发教程系列-2 - 前端开发书籍分享

    目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记   前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...

  9. 每天一个linux命令（17）：locate 命令

    locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...

  10. SVN命令使用详解

    1.检出svn  co  http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn  co  svn://路径(目录或文件的全路径) ...