JS动态添加行列

<%@ 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动态添加行列的更多相关文章

js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
form表单无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
使用js动态添加组件
在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
原生JS动态添加和删除类
原生JS动态添加和删除类由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类添加和和删除类有三种方法首先等 ...
MUI 里js动态添加数字输入框后，增加、减少按钮无效
numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...
原生js动态添加style，添加样式
原生js动态添加style,添加样式第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...
Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

Elastic 之倒排索引（二）
常规索引建立: 文档-->关键词的映射过程(正向索引) 缺点:费时便利全部文档倒排反向建立索引: 关键词-->文档的映射反向到倒排索引:将索引的关键词出现的文档的位置和出现频率通过文 ...
锋利的jquery 事件动画
事件 $(function){} bind(type, [data],function) 事件类型, 传递参数, 处理函数 hover(enter, leave) 光标停留时,函数enter,离开时函 ...
七、Servlet概述
Servlet概述生命周期方法:void init(ServletConfig):出生之后(1次):void service(ServletRequest request, ServletRes ...
MYSQL定时任务触发器
流程: 查看时间调度器是否开启,OFF关闭,ON开启 SHOW VARIABLES LIKE 'event_scheduler' 设置开启 set GLOBAL event_scheduler = 1 ...
2019OO第一单元总结
第一次作业 (你没看错,就一个类...) 通过正则表达式处理输入的字符串,提取出每一项的系数和指数,在输出的时候,应当考虑到合并同类项和正项提前的问题,使得最终的输出最短. 我第一次作业的代码超级难看 ...
scrapy学习笔记(1)
初探scrapy,发现很多入门教程对应的网址都失效或者改变布局了,走了很多弯路.于是自己摸索做一个笔记. 环境是win10 python3.6(anaconda). 安装 pip install sc ...
iStatistica Pro for mac(mac系统监视器)
iStatistica Pro for mac是一款运行在Mac平台上的mac系统监视器,你可以使用iStatistica pro for mac破解版轻松查看PAM使用情况.CPU信息.磁盘信息.本 ...
windows下安装配置postgreSQL
1.下载 postgresql-10.4-1-windows-x64.exe 进行安装 2.环境配置(1)文本使用的IDE是VS2010,我们需要配置包含目录(include).库目录(lib).链接 ...
个人对stm32ADC编程关键点的理解
平时在做项目或者参加比赛的过程中,个人觉得,有些东西写出来可能会帮助到新手少走弯路.(也很可能是错误的,欢迎大家纠错) 如果只是采集一路信号,直接用ADC独立模式,单通道就可以了. 如果需要同时采集多 ...
Excle中的使用小技巧
关于从数据库中拷贝来的数字,拷贝到excle中,那些数字都变成了科学计算法. 步骤1,鼠标右键选中的列,选择“设置单元格格式(F)” 2.从这里面选中这些是否有小数,如果没有小数就把这个改成0

JS动态添加行列

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

随机推荐

热门专题