实现Table行的添加、删除(JavsScript )
<body><div align="center"><table cellspacing="0" cellpadding="0" width="550" border="0"> <tr> <td align="center"><div> <table width="100%" border="0" cellpadding="2" cellspacing="1" id="SignFrame"> <tr id="trHeader"> <td width="50px" align="center"><input id="selAll" type="checkbox"style="border-width: 0px;" mce_style="border-width: 0px;" /> <input type="button"value="Del" style="border-width: 0px;font-size: 9px;" mce_style="border-width: 0px;font-size: 9px;"/></td> <td width="1px"> Title </td> <td width="200px"> Last Name </td> <td width="200px"> First Name </td> <td></td> </tr> </table> </div> <div> <table border="0px" width="100%"> <tr> <td align="right"><input type="button" name="Submit" value="Add"style="font-size: 9px" mce_style="font-size: 9px" /> </td> </tr> </table> <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" /> </div></td></table></div><mce:script language="javascript" type="text/javascript"><!-- var isIE = false; var isFF = false; var isSa = false; if ((navigator.userAgent.indexOf("MSIE")>0) && (parseInt(navigator.appVersion) >=4))isIE = true; if(navigator.userAgent.indexOf("Firefox")>0)isFF = true; if(navigator.userAgent.indexOf("Safari")>0)isSa = true; AddSignRow(1); function findObj(theObj, theDoc) { var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.frames.document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc) && theDoc.all) foundObj = theDoc.all; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers.document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } function AddSignRow(count){ for(i=1;i<=count;i++) { //读取最后一行的行号，存放在txtTRLastIndex文本框中 var txtTRLastIndex = findObj("txtTRLastIndex",document); var rowID = parseInt(txtTRLastIndex.value); var signFrame = findObj("SignFrame",document); //添加行 var newTR = signFrame.insertRow(signFrame.rows.length); newTR.id = "SignItem" + rowID; //Add Row:CheckBox var newChkBoxTD=newTR.insertCell(0); newChkBoxTD.innerHTML = "<input type='checkbox' name='chk" + rowID + "' id='chk" + rowID + "' style="border-width: 0px;" mce_style="border-width: 0px;">"; //newNameTD.innerHTML = newTR.rowIndex.toString(); //Add Row:Title var newTitleTD=newTR.insertCell(1); newTitleTD.innerHTML = "<select name='selTitle"+ rowID +"' id='selTitle"+rowID+"'><option value='Mr'>Mr</option><option value='Mrs'>Mrs</option><option value='Miss'>Miss</option><option value='Ms'>Ms</option><option value='Dr'>Dr</option></select>"; //Add Row:Last Name var newLastNameTD=newTR.insertCell(2); newLastNameTD.innerHTML = "<input name='txtLName" + rowID + "' id='txtLName" + rowID + "' type='text' maxlength='50' style='width:98%' />"; //Add Row:First Name var newFirNameTD=newTR.insertCell(3); newFirNameTD.innerHTML = "<input name='txtFName" + rowID + "' id='txtFName" + rowID + "' type='text' maxlength='50' style='width:98%' />"; //添加列:删除按钮 var newDeleteTD=newTR.insertCell(4); newDeleteTD.innerHTML = "<div align='center' style='width:30px'><a href="javascript:;" mce_href="javascript:;" onclick=\"DeleteSignRow('SignItem" + rowID + "')\">Del</a></div>"; //将行号推进下一行 txtTRLastIndex.value = (rowID + 1).toString() ; } } //删除指定行 function DeleteSignRow(rowid){ var signFrame = findObj("SignFrame",document); var signItem = findObj(rowid,document); //获取将要删除的行的Index var rowIndex = signItem.rowIndex; //删除指定Index的行 signFrame.deleteRow(rowIndex); //重新排列序号，如果没有序号，这一步省略 //for(i=rowIndex;i<signFrame.rows.length;i++){ //signFrame.rows.cells.innerHTML = i.toString(); //} DefaultSignRow(); } //清空列表 function ClearAllSign(){ var signFrame = findObj("SignFrame",document); var rowscount = signFrame.rows.length; //循环删除行,从最后一行往前删除 for(i=rowscount - 1;i > 0; i--){ var chk = signFrame.rows.cells.getElementsByTagName('input'); if(chk.checked) signFrame.deleteRow(i); } document.getElementById("selAll").checked=false; //重置最后行号为1 var txtTRLastIndex = findObj("txtTRLastIndex",document); txtTRLastIndex.value = "1"; DefaultSignRow(); } function DefaultSignRow() { var signFrame = findObj("SignFrame",document); var rowscount = signFrame.rows.length; if(signFrame.rows.length == 1) AddSignRow(1); } function SelectAll(obj){ var signFrame = findObj("SignFrame",document); var rowscount = signFrame.rows.length; for(i=rowscount - 1;i > 0; i--){ var chk = signFrame.rows.cells.getElementsByTagName('input'); chk.checked = obj.checked; } } function checklength(obj) { if(obj.value.length==0) obj.value=1; } function onlyNumber(e) { var key; iKeyCode = window.event?e.keyCode:e.which; if( !(((iKeyCode >= 48) && (iKeyCode <= 57)) || (iKeyCode == 13) || (iKeyCode == 37) || (iKeyCode == 39) || (iKeyCode == 8))) { if (isIE) { e.returnValue=false; } else { e.preventDefault(); } } } function Next() { if(IsExistPax()) alert("Duplication of records!"); else { var pax_info=getContent(); if(pax_info!="") window.location.href="TableTest2.aspx?pax_info="+pax_info; } } function getContent() { var signFrame = findObj("SignFrame",document); var rowscount = signFrame.rows.length; var sInfo=""; for(i=1;i<rowscount;i++){ var STitle = signFrame.rows.cells.getElementsByTagName('select'); var LName = signFrame.rows.cells.getElementsByTagName('input'); var FName = signFrame.rows.cells.getElementsByTagName('input'); if(LName.value + FName.value != "") sInfo += STitle.value +";"+LName.value+";"+FName.value+"|" ; } return escape(sInfo); } function IsExistPax() { var signFrame = findObj("SignFrame",document); var rowscount = signFrame.rows.length; for(i=rowscount - 1;i > 0; i--) { var STitle = signFrame.rows.cells.getElementsByTagName('select'); var LName = signFrame.rows.cells.getElementsByTagName('input'); var FName = signFrame.rows.cells.getElementsByTagName('input'); if(LName.value + FName.value != "") { for(x=rowscount - 1;x > 0; x--) { if(i != x) { var STitleT = signFrame.rows.cells.getElementsByTagName('select'); var LNameT = signFrame.rows.cells.getElementsByTagName('input'); var FNameT = signFrame.rows.cells.getElementsByTagName('input'); if(STitle.value==STitleT.value && LName.value==LNameT.value && FName.value==FNameT.value) return true; } } } } return false; } // --></mce:script></body></html>
页:
[1]