首页 > 代码库 > JS动态添加行列
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:0 auto;} #tab td{ border:1px solid #000000;} #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("?")) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p); } if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !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(0); NewTd1.style.width = 200; var NewTd2 = newTR.insertCell(1); NewTd2.style.width = 190; var NewTd3 = newTR.insertCell(2); NewTd3.style.width = 210; var NewTd4 = newTR.insertCell(3); NewTd4.style.width = 40; //设置列的内容及属性 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 = http://www.mamicode.com/‘#‘ onclick = /"DeleteSignRow(‘SignItem" + rowID + "‘)\">删除</a>"; //将行号推进到下一行 txtIndex.value = http://www.mamicode.com/(rowID + 1).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=http://www.mamicode.com/"添加一行" onclick = "addRow()" /> <input name=‘txtIndex‘ type=‘hidden‘ id=‘txtIndex‘ value=http://www.mamicode.com/"4" /> <br /> </div> <table width = "640" cellpadding="0" cellspacing="0" id = "tab"> <tr> <td> 姓名 </td> <td colspan = "3"> </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 = "3"> </td> </tr> </table> </form></body></html>
JS动态添加行列
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。