<%@ 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 = ' 170px; text-align:center; border:0px;' id = 'txt " + rowID + "' />"; NewTd2.innerHTML = "<input type = 'text' style = ' 160px; text-align:center; border:0px;' id = 'txt " + rowID + "' />"; NewTd3.innerHTML = "<input type = 'text' style = ' 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 + 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 = " 640px; margin:0 auto;" id = "dv"> <input type="button" id="Add" value="添加一行" onclick = "addRow()" /> <input name='txtIndex' type='hidden' id='txtIndex' value="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 = " 200px;">姓名</td> <td style = " 190px">邮箱</td> <td style = " 210px">投标内容</td> <td style = " 40px"></td> </tr> <tr> <td>性别</td> <td colspan = "3"> </td> </tr> </table> </form> </body> </html>