<%@ 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. PowerShell导出场中的WSP包到本地

    Add-PSSnapin Microsoft.SharePoint.PowerShell –erroraction SilentlyContinue## setup our output direct ...

  2. 定位 position 透明度 opacity

    1.position 定位 position:fixed 固定定位 position:relative 相对定位(不指定父级元素的话相对于document) position:absolute 绝对定 ...

  3. 杂_小技巧_将网页上的内容通过亚马逊邮箱传到kindle中

    所需条件 1.kindle要联网 2.要有亚马逊邮箱 3.要有微信,电脑上或者手机上 操作步骤: 1.找到你想要传送到kindle上的文章网页 2.在微信中关注“亚马逊kindle服务号”并且按照里边 ...

  4. 大规模微服务架构下的Service Mesh探索之路

    小结: 1. 第一.二代Service Mesh meetup-slides/敖小剑-蚂蚁金服-大规模微服务架构下的Service Mesh探索之路.pdf https://github.com/se ...

  5. springboot+rediscluster

    @EnableCaching @Configuration public class RedisConfiguration extends CachingConfigurerSupport { @Au ...

  6. Homework 7 INF 552

    Homework 7 INF 552,1. Generative Models for Text(a) In this problem, we are trying to build a genera ...

  7. CF1139D Steps to One

    题目链接:洛谷 这个公式可真是个好东西.(哪位大佬知道它叫什么名字的?) 如果$X$恒$\geq 0$,那么 $$E[X]=\int_0^{+\infty}P(X>t)dt$$ 呸,我什么都没写 ...

  8. vue + ts @Prop boolean 问题

    假设btn组件有一prop属性radio,声明如下 @Prop({ default: false }) radio!: boolean; 在组件传递 <btn radio /> 此时的 r ...

  9. 【Python】This inspection detects names that should resolve but don't. Due to dynamic dispatch and duck

    情况一:导包import时发生错误,请参考这两位 https://blog.csdn.net/zhangyu4863/article/details/80212068https://www.cnblo ...

  10. React表格报错Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

    解决: <Table bordered rowKey={record=>record.id} //解决 components={this.components} columns={colu ...