<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Add-Delete Row.aspx.cs" Inherits="Add_Delete_Row" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        #Add{ margin:0px auto;}

        #tab{ border-collapse:collapse; text-align:center; margin: auto;}

        #tab td{ border:1px solid #;}

        #tr1{ font-family:@华文仿宋; color:Red;}

    </style>

    <script type="text/javascript">

        function findObj(theObj, theDoc) {

            var p, i, foundObj;

            if (!theDoc) theDoc = document;

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

            { theDoc = parent.frames[theObj.substring(p + )].document; theObj = theObj.substring(, p); } if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i = ; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = ; !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 addRow() {

            //读取添加一行的行号，存放在txtIndex文本框中

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

            var rowID = parseInt(txtIndex.value);

            //alert(rowID);

            //添加一行

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

            //添加行

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

            newTR.id = "SignItem" + rowID; //添加行数的ID

            //添加列

            var NewTd1 = newTR.insertCell();

            NewTd1.style.width = ;

            var NewTd2 = newTR.insertCell();

            NewTd2.style.width = ;

            var NewTd3 = newTR.insertCell();

            NewTd3.style.width = ;

            var NewTd4 = newTR.insertCell();

            NewTd4.style.width = ;

            //设置列的内容及属性

            NewTd1.innerHTML = "<input type = 'text' style = ' width:170px; text-align:center; border:0px;' id = 'txt " + rowID + "' />";

            NewTd2.innerHTML = "<input type = 'text' style = ' width:160px; text-align:center; border:0px;' id = 'txt " + rowID + "' />";

            NewTd3.innerHTML = "<input type = 'text' style = ' width:170px; text-align:center; border:0px;' id = 'txt " + rowID + "' />";

            NewTd4.innerHTML = "<a style = ' text-decoration:none;' href = '#' onclick = \"DeleteSignRow('SignItem" + rowID + "')\">删除</a>";

            //将行号推进到下一行

            txtIndex.value = (rowID + ).toString();

        }

        //删除指定行

        function DeleteSignRow(rowid) {

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

            var signItem = findObj(rowid, document);

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

            var rowIndex = signItem.rowIndex;

            //alert(rowIndex);

            //删除指定Index的行

            signFrame.deleteRow(rowIndex);

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

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

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

//            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div style = " width:640px; margin:0 auto;" id = "dv">

    <input type="button" id="Add" value="添加一行" onclick = "addRow()" />

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

    <br />

    </div>

    <table width = "" cellpadding="" cellspacing="" id = "tab">

        <tr>

            <td>

                姓名

            </td>

            <td colspan = "">

            </td>

        </tr>

        <tr id = "tr1">

            <td style = " width:200px;">姓名</td>

            <td style = " width:190px">邮箱</td>

            <td style = " width:210px">投标内容</td>

            <td style = " width:40px"></td>

        </tr>

        <tr>

            <td>性别</td>

            <td colspan = "">

            </td>

        </tr>

    </table>

    </form>

</body>

</html>

JS动态添加行列的更多相关文章

  1. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  2. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  3. 【原生js】js动态添加dom，如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  4. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  5. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  6. MUI 里js动态添加数字输入框后，增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  7. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  8. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  9. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【ASP.NET】Validation 服务器控件

    Validation 服务器控件 Validation 服务器控件用于验证输入控件的数据.如果数据未通过验证,则向用户显示错误消息. 创建 Validation 服务器控件的语法是: <asp: ...

  2. jquery弹窗插件layer：layer.layui.com

    这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...

  3. mysql中各种日期数据类型及其所占用的空间

    DATETIME,8字节: DATE,3字节: TIMESTAMP,4字节: YEAR,1字节: TIME,3字节:

  4. TCP断开那些事

    继上一篇后,我们再来看一下四次挥手的过程 这里其实没有必要过多阐述,一张图胜过千言万语. 与三次握手一样,四次挥手的过程中也有许多扩展问题. 当然问的最多的还是:为什么要四次握手?为什么要等待2MSL ...

  5. Mock Server 实现post方法的接口（三）

    Mock Server 实现post方法的接口(三) 1.mock server实现的接口,当request中未设置"method"时,会自动将所有method试一次,所以一定要指 ...

  6. Spring cloud 之Ribbon（一）基本使用

    简介 Spring cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具,它是基于Netflix的Riboon实现的.Ribbon是客户端负载均衡器,这有别语例如Nginx服务端负载 ...

  7. python生成excel测试数据

    在功能测试时,经常会测到excel文件导入导出的功能,导入与导出时,需要测试系统单次导入大批量数据时是否正常, 如果系统承受不起太大的数据导入,则需要开发限制单次导入的数量,以防止系统服务异常.大量的 ...

  8. tfs权限设置

    需求,管理员用户可以看到tfs里面的所有项目,现在需要给某个开发人员设置权限,只让其看到其中某一个项目. 一.tfs服务器设置 1.在服务器管理器中的[本地用户和组]中添加一个新用户,并在“组”将新用 ...

  9. Node.js、npm、vue-cli 的安装配置环境变量

    我安装node.js是为了学习vue,需要用到npm,所以就把node.js安装了,安装node.js会带有npm的安装. 在安装node.js之前,我们需要了解以下三个内容. npm: Nodejs ...

  10. SharePoint 已在此服务器场中安装 ID 为 XXXXXXXXX 的功能。请使用强制属性显式地重新安装此功能。解决方法

    图1: 图2: 解决方法: stsadm -o deploysolution -name ***.wsp -immediate -allowGacDeployment -url http://*** ...