`
TonyBug
  • 浏览: 16441 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

js动态添加行

HTML 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <META NAME="Generator" CONTENT="EditPlus">
        <META NAME="Author" CONTENT="">
        <META NAME="Keywords" CONTENT="">
        <META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

        <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>    </HEAD>
    <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>
分享到：
| js省市联动
评论
发表评论

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

相关推荐

    js动态添加行和删除行

    在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...

    利用javascript动态添加行(原创)

    1. **DOM操作**：JavaScript动态添加行的核心是Document Object Model (DOM)。DOM是HTML和XML文档的结构化表示，通过它可以读取、修改和更新页面内容。使用DOM方法如`createElement()`, `appendChild()` 和 `...

    js动态添加行和列

    以下是对如何使用JavaScript动态添加行和列的详细解析： ### 1. 获取目标元素 在示例代码中，首先通过`getElementById`方法获取了ID为`noticeContentTab`的元素对象，该对象通常代表一个表格。这是动态添加行和列...

    table 使用js 高效 动态添加行

    二、JavaScript动态添加行 1. 获取表格引用：首先，我们需要获取到表格的引用。可以使用`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法。 ```javascript var table = ...

    table动态添加行并编辑

    JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`&lt;table&gt;`元素用于创建表格，但...

    动态添加行动态添加行

    动态添加行指的是在用户执行特定操作（如点击按钮）时，通过JavaScript在页面上的表格或列表中插入新的行。这种功能在数据输入、展示可变数量的信息或者允许用户自定义内容的场景中非常实用。 首先，理解基本的HTML...

    用js实现的动态添加一行

    在这个练习中，可能的场景是用户填写表单，然后使用AJAX发送数据到服务器，服务器返回成功信息后，JavaScript动态添加新的一行到表格。 在实现AJAX请求时，需要进行以下步骤： 1. **创建XMLHttpRequest对象**：这...

    javascript动态添加表格数据行

    在这个例子中，我们将探讨如何利用JavaScript在HTML表格中实现动态添加行，并将数据提交到服务器进行存储。 首先，我们需要创建一个基本的HTML结构，包括一个表单和一个表格。表格中包含预定义的列，如项目名称、...

    js动态添加table行

    本文代码主要实现了javascript如何操作table并动态添加行的方法

    js动态添加和删除行

    动态添加行的基本思路是，当用户触发某个事件（如点击按钮）时，利用JavaScript创建新的`&lt;tr&gt;`（表格行）元素和对应的`&lt;td&gt;`（表格单元格）元素，然后将它们插入到表格中适当的位置。以下是一个简单的步骤概述： 1....

    Html动态添加行

    JavaScript文件（在这里可能是`js`目录下的一个或多个文件）则负责处理动态添加行的逻辑。jQuery库提供了简便的API来操作DOM，例如`$(selector).append(content)`可以将新的HTML内容追加到指定的选择器后面，从而...

    用js实现动态添加行add.js

    通过js实现动态添加行，前台实现代码在我的博客中，这是add.js的源码

    JavaScript动态添加删除表格行

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

    .net动态添加行

    总结来说，".net动态添加行"是一种在ASP.NET应用中提高用户体验的方法，通过DATATABLE和VIEWSTATE在页面回发期间保存用户输入，最后一次性将所有数据批量写入数据库，避免了频繁的数据库交互，提升了应用性能。...

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

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

    JS动态添加删除HTML元素(实例)

    JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它...

    JS动态添加tr

    本文将详细讲解如何使用JavaScript动态添加`&lt;tr&gt;`元素，即表格行，以及如何结合DIV+CSS实现页面布局。 一、JS动态添加`&lt;tr&gt;` 在HTML中，`&lt;table&gt;`元素用于创建表格，而`&lt;tr&gt;`元素代表表格的一行。在JavaScript中，...

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