`

js动态增加删除 Table 行

 
阅读更多

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

        <title>增加Table行</title>

    </head>

<script language="javascript">// Example: obj = findObj("image1");

function findObj(theObj, theDoc){

var p, i, foundObj;

    if(!theDoc) theDoc = document;

        if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)

        {  

               theDoc = parent.frames[theObj.substring(p+1)].document;

               theObj = theObj.substring(0,p);

        } 

        if(!(foundObj = theDoc[theObj]) && theDoc.all)

               foundObj = theDoc.all[theObj];

        for (i=0; !foundObj && i < theDoc.forms.length; i++)

               foundObj = theDoc.forms[i][theObj];

        for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)

               foundObj = findObj(theObj,theDoc.layers[i].document); 

        if(!foundObj && document.getElementById)

               foundObj = document.getElementById(theObj);  

        return foundObj;

}

//添加一个参与人填写行

function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中

 var txtTRLastIndex = findObj("txtTRLastIndex",document);

 var rowID = parseInt(txtTRLastIndex.value);

 

 var signFrame = findObj("SignFrame",document);

 //添加行

 var newTR = signFrame.insertRow(signFrame.rows.length);

 newTR.id = "SignItem" + rowID;

 

 //添加列:序号

 var newNameTD=newTR.insertCell(0);

 //添加列内容

 newNameTD.innerHTML = newTR.rowIndex.toString();

 

 //添加列: 姓名

 var newNameTD=newTR.insertCell(1);

 //添加列内容

 newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";

 

 //添加列:电子邮箱

 var newEmailTD=newTR.insertCell(2);

 //添加列内容

 newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";

 

 //添加列:电话

 var newTelTD=newTR.insertCell(3);

 //添加列内容

 newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";

 

 //添加列:手机

 var newMobileTD=newTR.insertCell(4);

 //添加列内容

 newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";

 

 //添加列:公司名

 var newCompanyTD=newTR.insertCell(5);

 //添加列内容

 newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";

 

 

 //添加列:删除按钮

 var newDeleteTD=newTR.insertCell(6);

 //添加列内容

 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";

 

 //将行号推进下一行

 txtTRLastIndex.value = (rowID + 1).toString() ;

}

//删除指定行

function DeleteSignRow(rowid){

 var signFrame = findObj("SignFrame",document);

 var signItem = findObj(rowid,document);

 

 //获取将要删除的行的Index

 var rowIndex = signItem.rowIndex;

 

 //删除指定Index的行

 signFrame.deleteRow(rowIndex);

 

 // 重新排列序号，如果没有序号，这一步省略

 for(i=rowIndex;i<signFrame.rows.length;i++){

  signFrame.rows[i].cells[0].innerHTML = i.toString();

 }

}//清空列表

function ClearAllSign(){

 if(confirm('确定要清空所有参与人吗？')){

  var signFrame = findObj("SignFrame",document);

  var rowscount = signFrame.rows.length;

 

  //循环删除行,从最后一行往前删除

  for(i=rowscount - 1;i > 0; i--){

   signFrame.deleteRow(i);

  }

 

  //重置最后行号为1

  var txtTRLastIndex = findObj("txtTRLastIndex",document);

  txtTRLastIndex.value = "1";

 

  //预添加一行

  AddSignRow();

 }

}

</script>

 

    <body>

         <div>

  <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">

              <tr id="trHeader">

                <td width="27" bgcolor="#96E0E2">序号</td>

                <td width="64" bgcolor="#96E0E2">用户姓名</td>

                <td width="98" bgcolor="#96E0E2">电子邮箱</td>

                <td width="92" bgcolor="#96E0E2">固定电话</td>

                <td width="86" bgcolor="#96E0E2">移动手机</td>

                <td width="153" bgcolor="#96E0E2">公司名称</td>

                <td width="57" align="center" bgcolor="#96E0E2">&nbsp;</td>

              </tr>

        </table>

   </div>

   <div>

        <input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />

     <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />

     <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />

   </div>

    </body>

</html>

 

分享到：
| Struts1入门实例（简单登录）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript table 增加删除行,巧妙实现

    在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    JS动态添加、删除Table行排序（删除整行、删除整列）

    这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....

    js 操作 增加删除Table行

    本文将深入探讨如何使用JavaScript来动态地增加和删除表格（Table）的行。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`（表格行）元素、`&lt;td&gt;`（表格数据单元格）元素组成。如果...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    JQuery动态添加删除table行.

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...

    table JS 添加行和删除行

    在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示或者管理界面非常实用。 首先，让我们了解HTML表格的基本结构。一个简单的HTML表格由`&lt;table&gt;`标签定义，每...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含，其中包含`&lt;tr&gt;`（表格行）元素，每行内可以有多个`&lt;td&gt;`（表格数据单元格）或`...

    添加删除TABLE行

    javascript添加删除table行

    jstable添加行删除行复制行

    在处理表格（Table）元素时，JavaScript可以帮助我们实现实时的动态操作，比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素。它用于创建表格，...

    javascript增加和删除table行及验证和遮罩

    javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩

    js table添加删除行

    js table添加、删除行。点“添加”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行。

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`&lt;table&gt;`元素用于创建...

    常用的js动态增加（删除）table数据行的功能

    在JavaScript中，动态地添加或删除表格数据行是常见的需求，尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能，并提供相关的源码示例。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table...

    一个动态添加table行的js例子

    在JavaScript编程中，动态添加和删除表格行是一个常见的需求，特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先，我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...

    使用jquery给指定的table动态添加一行、删除一行

    支持在任意行添加一行且可配置的，如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行，随需求的变化都不会影响。 前提条件：行数需在表中存在否则添加不成功。 2）、删除一行 支持动态...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...

    JS动态增加删除行

    在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...

    table动态添加行

    "table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先，我们要理解基本的`HTML`表格结构。一个简单的`HTML`表格由`&lt;table&gt;`标签开始，内部包含`&lt;tr&gt;`（表格行）、`&lt;th&gt;`（表头单元格）和`&lt;td&gt;`...

    js动态添加和删除行

    "js动态添加和删除行"这个主题就是关于如何利用JavaScript在HTML表格（`&lt;table&gt;`）中实现动态添加和移除行的功能。这种功能在数据展示、用户输入等场景下非常常见，比如在线表格编辑器、数据库数据查看等。 动态...

    HTML TABLE批量添加行与删除行

    HTML TABLE批量添加行与删除行.javascript实现。

Magicbox
Global site tag (gtag.js) - Google Analytics