`
kouyandong
  • 浏览: 5718 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

js 动态添加表格行和列

    博客分类：
  • 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=utf-8" />

        <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 操作cookie 添加 删除 获取
评论
发表评论

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

相关推荐

    javascript动态添加表格数据行

    在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...

    JavaScript动态操作表格，添加，删除行、列及单元格

    JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    js动态添加行和列

    在JavaScript编程领域，动态添加行和列是一种常见的需求，特别是在处理表格数据时。这涉及到DOM（文档对象模型）操作，允许网页在不重新加载的情况下更新其结构和内容。以下是对如何使用JavaScript动态添加行和列的...

    table动态添加行并编辑

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

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    在JavaScript（JS）中，创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求，尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先，我们需要在HTML中创建一个...

    java 手动，用代码添加表格的行和列

    根据给定的部分内容，我们可以看到使用JavaScript来实现动态添加表格行和列的过程。下面是详细的步骤和代码解释： 1. **获取表格元素**： 使用`document.getElementById('tblSample')`获取ID为`tblSample`的表格...

    javascript动态操作表格

    首先，让我们从添加表格开始。在HTML中，表格由`&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;td&gt;`（单元格）等标签组成。使用JavaScript，我们可以动态创建这些元素并插入到文档中。例如： ```javascript // 创建一个新的表格 var ...

    js 添加删除表格

    以下是一个简单的例子，展示如何使用JavaScript添加和删除表格行： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

    js生成动态表格并为每个单元格添加单击事件的方法

    通过循环的方式为每一行和每一列创建相应的元素，并将它们添加到表格中。 ```javascript function setTable(trLineNumber, tdData) { var table = document.getElementById("table"); var row; var cell; for ...

    js读取json数据动态生成列数不固定的表格

    在本场景中，我们关注的是如何利用js从本地的JSON数据文档中读取信息，然后根据数据结构动态生成列数不固定的表格。这涉及到几个关键的知识点： 1. **JSON数据解析**：JSON（JavaScript Object Notation）是一种轻...

    动态删除表格行、列、双击编辑.rar

    "动态删除表格行、列、双击编辑"的主题涉及到JavaScript编程、HTML和CSS等技术的应用，旨在实现用户交互性强、灵活多变的表格功能。下面将详细介绍这些知识点。 首先，动态删除表格行和列是Web应用中增强用户体验的...

    动态改变表格的行和列

    7. **库和框架支持：** 有许多优秀的JavaScript库如jQuery, DataTables, Handsontable等，提供了更丰富的功能，包括动态添加和删除行和列。它们简化了DOM操作，提供了更友好的API，同时具备数据排序、过滤、分页等...

    JAVASCRIPT自动添加表格

    首先，让我们来理解“JavaScript自动添加表格”。在HTML中，表格由`&lt;table&gt;`元素定义，行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`)以及表头(`&lt;thead&gt;`)和表体(`&lt;tbody&gt;`)等组成。在JavaScript中，我们可以利用DOM（Document ...

    js动态添加删除表格

    在JavaScript（JS）中，动态添加和删除表格是常见的任务，尤其在开发交互式Web应用时。这涉及到了DOM（Document Object Model）操作，因为HTML表格实际上是由一系列DOM元素组成的。下面将详细介绍如何使用JavaScript...

    JavaScript table 动态添加行，列

    //设置表格属性 _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute("width","200"); //创建一行 for(var i=0;i;i++){ var _tr=_table....

    jQuery 动态添加或删除表格行

    1. **动态添加表格行** 要动态添加行，我们通常会先创建一个新的`&lt;tr&gt;`元素，然后添加所需的`&lt;td&gt;`或`&lt;th&gt;`。这可以通过`$('&lt;tr&gt;')`创建一个新的jQuery对象来完成。接下来，我们可以使用`.append()`方法将单元格...

    表格动态插入行

    本知识点主要探讨如何使用JavaScript（简称JS）来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本语言，它允许我们对网页进行实时更新和交互，而不需刷新整个页面。 首先，我们需要一个基本的HTML...

    elementui加vue.js 生成可输入表格可动态增加列

    总结起来，利用Vue.js和Element UI，我们可以轻松地创建一个具备动态增加列和编辑功能的表格。通过理解Vue.js的数据绑定和组件化思想，以及Element UI的API，开发者可以快速构建出复杂的前端应用。在实际开发过程中...

    js动态生成表格

    在JavaScript（JS）中动态生成表格是一项常见的任务，特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能，以及相关的源码和工具。 首先，我们要明白HTML表格的基本结构，它由`&lt;table&gt;`、`...

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