实现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" οnclick="SelectAll(this)" style="border-width: 0px;" mce_style="border-width: 0px;" /> <input type="button" οnclick="ClearAllSign()" 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" οnclick="AddSignRow(1)" 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[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[theObj]; 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:;" οnclick=\"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[0].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[i].cells[0].getElementsByTagName('input'); if(chk[0].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[i].cells[0].getElementsByTagName('input'); chk[0].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[i].cells[1].getElementsByTagName('select'); var LName = signFrame.rows[i].cells[2].getElementsByTagName('input'); var FName = signFrame.rows[i].cells[3].getElementsByTagName('input'); if(LName[0].value + FName[0].value != "") sInfo += STitle[0].value +";"+LName[0].value+";"+FName[0].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[i].cells[1].getElementsByTagName('select'); var LName = signFrame.rows[i].cells[2].getElementsByTagName('input'); var FName = signFrame.rows[i].cells[3].getElementsByTagName('input'); if(LName[0].value + FName[0].value != "") { for(x=rowscount - 1;x > 0; x--) { if(i != x) { var STitleT = signFrame.rows[x].cells[1].getElementsByTagName('select'); var LNameT = signFrame.rows[x].cells[2].getElementsByTagName('input'); var FNameT = signFrame.rows[x].cells[3].getElementsByTagName('input'); if(STitle[0].value==STitleT[0].value && LName[0].value==LNameT[0].value && FName[0].value==FNameT[0].value) return true; } } } } return false; } // --></mce:script> </body> </html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值