JS动态添加删除HTML元素
JS技术 2010-01-27 17:41:31 阅读449 评论0 字号：大中小
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>增加Table行</title>
</head>
<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 && ElementById) foundObj = ElementById(theObj); return foundObj;
}
//添加一个参与人填写行
function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中
    var txtTRLastIndex = findObj("txtTRLastIndex",document);
    var rowID = parseInt(txtTRLastIndex.value);
   
    var signFrame = findObj("SignFrame",document);
    //添加行
    var newTR = signFrame.ws.length);
    newTR.id = "SignItem" + rowID;
   
    //添加列:序号
    var newNameTD=newTR.insertCell(0);
    //添加列内容
    newNameTD.innerHTML = String();
   
    //添加列: 姓名
    var newNameTD=newTR.insertCell(1);
    //添加列内容
    newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";
   
    //添加列:
    var newEmailTD=newTR.insertCell(2);
    //添加列内容
    newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";
   
    //添加列:删除按钮
    var newDeleteTD=newTR.insertCell(3);
    //添加列内容
    newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
   
    //将行号推进下一行
    txtTRLastIndex.value = (rowID + 1).toString() ;
}
/
/删除指定行
function DeleteSignRow(rowid){
    var signFrame = findObj("SignFrame",document);
    var signItem = findObj(rowid,document);
   
    //获取将要删除的行的Index
    var rowIndex = wIndex;
   
    //删除指定Index的行
    signFrame.deleteRow(rowIndex);
   
    // 重新排列序号，如果没有序号，这一步省略
    for(i=rowIndex;i&ws.length;i++){
      ws[i].cells[0].innerHTML = i.toString();
    }
}//清空列表
function ClearAllSign(){
    if(confirm('确定要清空所有参与人吗？')){
          var signFrame = findObj("SignFrame",document);
          var rowscount = ws.length;
       
          //循环删除行,从最后一行往前删除
          for(i=rowscount - 1;i > 0; i--){
          signFrame.deleteRow(i);
          }
       
          //重置最后行号为1
          var txtTRLastIndex = findObj("txtTRLastIndex",document);
          txtTRLastIndex.value = "1";
       
          //预添加一行
          AddSignRow();
    }
}
</script>
<body>
<div>
  <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
    <tr id="trHeader">
      <td width="27" bgcolor="#96E0E2">序号html frame</td>
      <td width="64" bgcolor="#96E0E2">用户姓名</td>
      <td width="98" 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='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
</div>
</body>
</html>


=======================================================================

实例二

<html xmlns="/1999/xhtml">
<head>
<title>JavaScript实现动态删除节点代码</title>
<div id="test1">
    <p id="x1">AAAAAAAAAAAAAAAA</p>
    <p>BBBBBBBBBBBBBBB</p>
</div>
<hr>
<div id="test2">
    <p id="x1">CCCCCCCCCCC</p>
    <p>DDDDDDDDDDDD</p>
</div>
<hr>
<div id="test3">
    <p id="x1">EEEEEEEEEEE</p>
    <p>FFFFFFFFFFFFFFF</p>
</div>
<input type="button" value="test1" onClick="aa('test1')"><input type="button" value="DEL_test1" onClick="removeElement('test1')">
<input type="button" value="test2" onClick="bb('test2')">
<input type="button" value="test3" onClick="cc('test3')">

<script type="text/javascript">
//oTest newNode这两个变量如果在函数里边,则追加节点,
var oTest = ElementById("test2");
var newNode = ateElement("p");
//appendChild() 方法在节点的子节点列表末添加新的子节点。
//insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
//nextSibling 属性可返回某个元素之后紧跟的元素（处于同一树层级中）。
function aa(id){
    var oTest = ElementById(id);
    var newNode = ateElement("p");
    newNode.innerHTML =Date();
    oTest.appendChild(newNode);
}

function bb(id){
    newNode.innerHTML =Date();
    oTest.insertBefore(newNode,null);
}
function cc(id){
    var oTest = ElementById(id);
    var newNode = ateElement("p");
    newNode.innerHTML =Date();
    insertAfter(newNode,oTest);
}



function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        // 如果最后的节点是目标元素，则直接添加。因为默认是最后
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(Sibling);
    //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
    }
}

//删除某ID元素
function removeElement(id){
    ElementById(id);
    veChild(obj);
}

</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。