<%@ 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. eclipse部分常用快捷键

    -------------eclipse常用快捷键------------- 1.alt+?或alt+/:自动补全代码或者提示代码 2.ctrl+o:快速outline视图 3.ctrl+shift+ ...

  2. popwindow+动画

    布局: main: <Button android:id="@+id/btn" android:layout_width="match_parent" a ...

  3. 最大流sap

    带当前弧优化 gap优化的sap 甚至省去了开始的bfs分层 虽然花了一些时间了解原理 但是感觉不亏 现在能完全独立靠原理写出具体实现了 #include<cstdio> #include ...

  4. Mysqlbinlog解析工具

    Mysql的binlog日志作用是用来记录mysql内部增删改查等对mysql数据库有更新的内容的记录(对数据库的改动),对数据库的查询select或show等不会被binlog日志记录;主要用于数据 ...

  5. python之str字符串

    字符串是python非常重要的数据类型,它是一个序列(列表和元组也是序列),有下标,可以通过下标遍历字符串序列:同时字符串也是一个不可变数据类型,每次使用"+"拼接字符串时都会产生 ...

  6. Spring Cloud 之Eureka（一）

    简介 Eureka是Spring cloud 的基本套件之一,是基于Netflix 的Eureka做的二次封装,主要是负责完成微服务架构中的服务治理功能.它是微服务架构中最为核心和基础的模块,它主要是 ...

  7. new和malloc区别，delete和delete []区别

    面试被问到上述问题,所以特地总结一下: 一.new和malloc的区别. 1.new可以返回指定类型的指针,并且自动分配内存大小:malloc需要计算手动计算分配空间的大小,并且返回值需要强转为实际类 ...

  8. 2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践 1.基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 下载自己不熟悉的软件时含有病毒. 网络钓鱼, ...

  9. Spring Boot 国际化及点击链接跳转国家语言

    一.国际化 在SpringBoot中已经自动帮我们配置管理国际化资源的组件,所以我们只需要编写代码就可. @Bean @ConfigurationProperties(prefix = "s ...

  10. 【Mac】-NO.161.Mac.1 -【MacOS Error running 'Tomcat 8.5.371': Cannot run program Permission denied】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...