<%@ 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. ubuntu16.04 anaconda的安装和卸载

    第一次安装: 1.直接从官网下载了anaconda安装包,然后bash ...sh安装. 2.过程中主要需要选择安装路径,为了把安装的软件都放在一起,我新建了一个install_software在系统 ...

  2. 不让浏览器缓存index.html

    参考文档:https://www.2cto.com/ask/question/4598 location = /index.html { add_header Cache-Control " ...

  3. 秒杀ecshop的前台写shell 0day

    ECSHOP号称最大的开源网店系统,官方是这样介绍它的:“ECShop网店系统是一套免费开源的网上商店软件,无论在稳定性.代码优化.运行效率.负载能力.安全等级.功能可操控性和权限严密性等方面都居国内 ...

  4. | dp-the Treasure Hunter

    题目: A. Mr. Kitayuta, the Treasure Hunter time limit per test 1 second memory limit per test 256 mega ...

  5. OO第二次博客作业--第二单元总结

    第一次作业 1. 设计策略 第一次作业,一共三个线程,主线程.输入线程和电梯线程,有一个共享对象--调度器(队列). 调度的策略大多集中到了电梯里,调度器反而只剩下一个队列. 2. 基于度量的分析 类 ...

  6. linux1

    虚拟内存:内核通过磁盘上的存储空间来实现虚拟内存,这块区域称为交换空间.内核不断交换空间和实际的物理内存之间反复交换虚拟内存中的内容 linux运行中的程序叫做进程. 内核创建了第一个进程,叫做Ini ...

  7. Typora极简教程

    Typora极简教程 ” Markdown 是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber).它允许人们 “使用易读易写的纯文本格式编写文档,然后转换成有效的 HTML 文档.” ...

  8. golang的包管理---vendor/dep等

    首先关于vendor 1 提出问题 我们知道,一个工程稍大一点,通常会依赖各种各样的包.而Go使用统一的GOPATH管理依赖包,且每个包仅保留一个版本.而不同的依赖包由各自的版本工具独立管理,所以当所 ...

  9. opencart 3添加pdf文档下载功能

    opencart 3适合做外贸商城,如果能在产品页那边添加pdf文档功能是最好的,符合国外用户的使用习惯,增加客户的黏性.其实opencart已经有一个downloadable product可下载产 ...

  10. readlink 获取进程的绝对路径

    readlink可以获取exe所在的路径(直接和进程关联);无法获得so的路径,so路径可以用dladdr,参考另一篇文章linux系统中有个符号链接:/proc/self/exe 它代表当前程序,所 ...