찾다

집  >  기사  >  웹 프론트엔드  >  Node.js는 테이블에서 tr 행을 추가하고, tr 행을 삭제하고, tr 행을 지우는 간단한 예를 구현합니다.

Node.js는 테이블에서 tr 행을 추가하고, tr 행을 삭제하고, tr 행을 지우는 간단한 예를 구현합니다.

高洛峰
高洛峰원래의
2016-12-29 16:19:381409검색

아래와 같습니다: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="javascript">// Example: obj = findObj("image1"); 
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 AddSignRow(){ //读取最后一行的行号，存放在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; 
  
//添加列:序号 
var newNameTD=newTR.insertCell(0); 
//添加列内容 
newNameTD.innerHTML = newTR.rowIndex.toString(); 
  
//添加列:姓名 
var newNameTD=newTR.insertCell(1); 
//添加列内容 
newNameTD.innerHTML = "<input name=&#39;txtName" + rowID + "&#39; id=&#39;txtName" + rowID + "&#39; type=&#39;text&#39; size=&#39;12&#39; />"; 
  
//添加列:电子邮箱 
var newEmailTD=newTR.insertCell(2); 
//添加列内容 
newEmailTD.innerHTML = "<input name=&#39;txtEMail" + rowID + "&#39; id=&#39;txtEmail" + rowID + "&#39; type=&#39;text&#39; size=&#39;20&#39; />"; 
  
//添加列:电话 
var newTelTD=newTR.insertCell(3); 
//添加列内容 
newTelTD.innerHTML = "<input name=&#39;txtTel" + rowID + "&#39; id=&#39;txtTel" + rowID + "&#39; type=&#39;text&#39; size=&#39;10&#39; />"; 
  
//添加列:手机 
var newMobileTD=newTR.insertCell(4); 
//添加列内容 
newMobileTD.innerHTML = "<input name=&#39;txtMobile" + rowID + "&#39; id=&#39;txtMobile" + rowID + "&#39; type=&#39;text&#39; size=&#39;12&#39; />"; 
  
//添加列:公司名 
var newCompanyTD=newTR.insertCell(5); 
//添加列内容 
newCompanyTD.innerHTML = "<input name=&#39;txtCompany" + rowID + "&#39; id=&#39;txtCompany" + rowID + "&#39; type=&#39;text&#39; size=&#39;20&#39; />"; 
  
  
//添加列:删除按钮 
var newDeleteTD=newTR.insertCell(6); 
//添加列内容 
newDeleteTD.innerHTML = "<div align=&#39;center&#39; style=&#39;width:40px&#39;><a href=&#39;javascript:;&#39; onclick=\"DeleteSignRow(&#39;SignItem" + rowID + "&#39;)\">删除</a></div>"; 
  
//将行号推进下一行 
txtTRLastIndex.value = (rowID + 1).toString() ; 
} 
//删除指定行 
function DeleteSignRow(rowid){ 
var signFrame = findObj("SignFrame",document); 
var signItem = findObj(rowid,document); 
alert(rowid); 
//获取将要删除的行的Index 
var rowIndex = signItem.rowIndex; 
  
//删除指定Index的行 
signFrame.deleteRow(rowIndex); 
  
//重新排列序号，如果没有序号，这一步省略 
for(i=rowIndex;i<signFrame.rows.length;i++){ 
signFrame.rows[i].cells[0].innerHTML = i.toString(); 
} 
} 
//清空列表 
function ClearAllSign(){ 
if(confirm(&#39;确定要清空所有参与人吗？&#39;)){ 
var signFrame = findObj("SignFrame",document); 
var rowscount = signFrame.rows.length; 
  
//循环删除行,从最后一行往前删除 
for(i=rowscount - 1;i > 0; i--){ 
  signFrame.deleteRow(i); 
} 
  
//重置最后行号为1 
var txtTRLastIndex = findObj("txtTRLastIndex",document); 
txtTRLastIndex.value = "1"; 
  
//预添加一行 
AddSignRow(); 
} 
} 
</script> 
</HEAD> 
  
<BODY> 
<div> 
<table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame"> 
       <tr id="trHeader"> 
        <td width="27" bgcolor="#96E0E2">序号</td> 
        <td width="64" bgcolor="#96E0E2">用户姓名</td> 
        <td width="98" bgcolor="#96E0E2">电子邮箱</td> 
        <td width="92" bgcolor="#96E0E2">固定电话</td> 
        <td width="86" bgcolor="#96E0E2">移动手机</td> 
        <td width="153" bgcolor="#96E0E2">公司名称</td> 
        <td width="57" align="center" bgcolor="#96E0E2"> </td> 
       </tr> 
    </table> 
  </div> 
  <div> 
    <input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />  
   <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" /> 
   <input name=&#39;txtTRLastIndex&#39; type=&#39;hidden&#39; id=&#39;txtTRLastIndex&#39; value="1" /> 
  </div> 
  
</BODY> 
</HTML>

다음 방법을 사용하여 행을 삭제하는 것이 좋습니다... 

<html> 
<head> 
<title>1</title> 
<script> 
//得到行对象 
function getRowObj(obj) 
{ 
var i = 0; 
while(obj.tagName.toLowerCase() != "tr"){ 
obj = obj.parentNode; 
if(obj.tagName.toLowerCase() == "table")return null; 
} 
return obj; 
} 
  
//根据得到的行对象得到所在的行数 
function getRowNo(obj){ 
var trObj = getRowObj(obj); 
var trArr = trObj.parentNode.children; 
for(var trNo= 0; trNo < trArr.length; trNo++){ 
if(trObj == trObj.parentNode.children[trNo]){ 
alert(trNo+1); 
} 
} 
} 
  
//删除行 
function delRow(obj){ 
var tr = this.getRowObj(obj); 
if(tr != null){ 
tr.parentNode.removeChild(tr); 
}else{ 
throw new Error("the given object is not contained by the table"); 
} 
} 
</script> 
</head> 
  
<body> 
<table border = "1"> 
<tr> 
<td>A<input type="button" value="A" onclick="getRowNo(this)">getRowNo<td> 
</tr> 
<tr> 
<td>B<input type="button" value="B" onclick="delRow(this)">delRow<td> 
</tr> 
<tr> 
<td>C<input type="button" value="C" onclick="getRowNo(this)">getRowNo</td> 
</tr> 
<tr> 
<td>D<input type="button" value="D" onclick="getRowNo(this)">getRowNo</td> 
</tr> 
</table> 
</body> 
<html>

위는 추가하기 위해 편집기에서 가져온 js 구현입니다. 행 tr에서 테이블로, 행 tr 삭제, 행 tr 지우기, 모든 간단한 예제가 여기에 있습니다. 모두가 PHP 중국어 웹사이트를 지원하기를 바랍니다~

행 tr 추가, 행 tr 삭제에 대한 간단한 예제에 대한 추가 js 관련 기사 , 테이블의 행 tr 지우기 PHP 중국어 웹사이트에 주목하세요!


성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JSP에서 동적으로 셀을 병합하는 예제 코드다음 기사：JSP에서 동적으로 셀을 병합하는 예제 코드

관련 기사

더보기