求助:JS添加DIV,并且给DIV中的某个控件动态指定事件?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<div class="PersonListPNumber" id="PersonListPNumberli"></div>
  <div  id="PassengerList" style="height:auto;">
</div>
  <script language="javascript" type="text/javascript">
    <!--
var Li = document.getElementById("PassengerList");
var PassengerLi="<table width=\"500\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"Personlistspan\" ><tr><td height=\"20\" colspan=\"8\"><div class=\"personlistspanheadtitle\"><span class=\"personlistspanaddtitle\"style=\"float:left;\">当前行<span></span></span><span class=\"personlistspanremovepersonbnt\" style=\"float:right;margin-left:20px;cursor:pointer;margin-right:20px;\">删除</span><span class=\"personlistspanaddpersonbnt\" style=\"float:right;margin-left:20px;cursor:pointer;\">增加</span></div></td></tr><tr>   <td height=\"35\" align=\"center\"> 1：</td><td colspan=\"7\">&nbsp;</td></tr><tr>    <td height=\"35\" align=\"center\"> 2：</td><td colspan=\"7\">&nbsp;</td></tr></table>";
var PersonListPNumberli = document.getElementById("PersonListPNumberli");PersonListPNumberli.innerHTML="共 1 人";
//添加事件
function SetLiTableIndexForId()
{
  var div = Li.getElementsByTagName("Div");
   for(var i=0;i<div.length;i++)
{
   AddEventForSpan(div[i],i);
}
PersonListPNumberli.innerHTML="共 "+(div.length)+" 人";
}
AddTableToPassengerList();
SetLiTableIndexForId();
//添加人
function AddTableToPassengerList()
{
var div = Li.getElementsByTagName("Div");

if(div.length<20)
{
   var objdiv = document.createElement("DIV");
 Li.appendChild(objdiv);
 objdiv.innerHTML= PassengerLi;

}else{
alert("最多只能添加20个人!");
}
 }
//删除人
function RemoveTabelFromPassengerList(indexli)
{
    var div = Li.getElementsByTagName("Div");
if(div.length>1)
{
   Li.removeChild(div[indexli]);
 }
  }
function addEvent(object,e,fn)
{
  if(object.attachEvent)
  {
 object.attachEvent('on'+e,fn);
  }
  else 
  {
 object.addEventListener(e,fn,false);
  }
 }
 function RemoveEvent(object,e,fn)
 {
   if(object.detachEvent)
  {
    object.detachEvent('on'+e,fn);
    }
  else 
  {
    ovject.removeEventListener(e,fn,false);
    }
 }
 
function Events(obj,indexs,etype) 
{
  return function() {
  if(etype==1)
  {
  AddTableToPassengerList();
  }
  if(etype==0)
  {
  RemoveTabelFromPassengerList(indexs);
  }
SetLiTableIndexForId();

 };
 }
 //添加事件到具体的对象
 function AddEventForSpan(div,index)
 {
 var span = div.getElementsByTagName("Span");
   for(var n=0;n<span.length;n++)
 {
 if(span[n].className=="personlistspanremovepersonbnt")
 {
 addEvent(span[n],'click',Events(span[n],index,0));
 }
 if(span[n].className=="personlistspanaddpersonbnt")
 {
 addEvent(span[n],'click',Events(span[n],index,1));
 }
  if(span[n].className=="")
 {
 span[n].innerHTML=index+1;
 }
 }
  }
  -->
</script>
</body>
</html>
请问,上面的代码如何才能正常实现添加删除DIV,同时正常执行动态添加的事件.谢谢!

解决方案 »

  1.   

    LZ的代码太乱了，　你好像是好动态加删行。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <style type="text/css">
            .tab {
                border: 1px red solid;
                border-collapse: collapse;
            }        .td {
                border: 1px red solid;
            }
        </style>
        <script type="text/javascript">
            function add() {
                var tab = document.getElementById("tab");
    //            if(!tab.childNodes[0]){
    //                tab.appendChild(document.createElement("tbody"));
    //            }
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                td1.className = "td";
                td2.className = "td";
                td3.className = "td";
                td1.innerHTML = "aa";
                td2.innerHTML = "bb";
                td3.innerHTML = "cc";
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tab.childNodes[0].appendChild(tr);
            }
            function del() {
                var tab = document.getElementById("tab");
                if (tab.childNodes.length > 0) {
                    tab.childNodes[0].removeChild(tab.childNodes[0].lastChild);
                }
            }
        </script>
        <title></title>
    </head>
    <body>
    <table class="tab" id="tab">
        <tr>
            <td class="td">aaa</td>
            <td class="td">bb</td>
            <td class="td">cc</td>
        </tr>
    </table><input type="button" value="add" onclick="add()"/>
    <input type="button" value="del" onclick="del()"/>
    </body>
    </html>
      

  2.   

    如果你要用DIV　也是同样的道理先createElement再appendChild，DIV比Table还简单，就不给你写例子了。
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <style type="text/css">
            .tab {
                border: 1px red solid;
                border-collapse: collapse;
            }        .td {
                border: 1px red solid;
            }
        </style>
        <script type="text/javascript">
            function add() {
                var tab = document.getElementById("tab");
    //            if(!tab.childNodes[0]){
    //                tab.appendChild(document.createElement("tbody"));
    //            }
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                td1.className = "td";
                td2.className = "td";
                td3.className = "td";
                td1.innerHTML = "aa";
                td2.innerHTML = "bb";
                td3.innerHTML = "cc";
    td1.onclick = a;
                td2.onclick = a;
                td3.onclick = a;
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tab.childNodes[0].appendChild(tr);
            }
            function del() {
                var tab = document.getElementById("tab");
                if (tab.childNodes.length > 0) {
                    tab.childNodes[0].removeChild(tab.childNodes[0].lastChild);
                }
            } function a(){
    alert(1)
    }        </script>
        <title></title>
    </head>
    <body>
    <table class="tab" id="tab">
        <tr>
            <td class="td">aaa</td>
            <td class="td">bb</td>
            <td class="td">cc</td>
        </tr>
    </table><input type="button" value="add" onclick="add()"/>
    <input type="button" value="del" onclick="del()"/>
    </body>
    </html>
      

  4.   

    td1.onclick = a;
    td2.onclick = a;
    td3.onclick = a;　    　这就加上事件了。　
      

  5.   

    我感觉应该分开执行，让动态添加事件不随着div的有无而收到影响不知道这个思路是否可行~
      

  6.   

    <style>
    .div{
    display:block;
    border:1px solid #FF0000;
    }
    </style>
    <div id="div"></div>
    </form>
    <script type="text/javascript">
            function add() {
                var divobj = document.getElementById("div");
    var div= document.createElement("div");
    div.className = "div";
    div.innerHTML = "1人<a href='javascript:' onclick='del(this)'>删除</a>";
                divobj.appendChild(div);
            }
            function del(obj) {
    obj.parentNode.parentNode.removeChild(obj.parentNode);
            }
        </script>
    <input type="button" value="add" onclick="add()"/>
      

  7.   

    看来还是没说明白我想要的作用.
    简单的说,不管是表格还是DIV,我需要用JS动态创建,并且在创建的DIV里的两个按钮分别动态添加增加和删除事件.
    每次添加一行,则在此行的按钮个添加事件.同理,有多少行,则在每一行的按钮上分别动态添加删除此行的事件和增加按钮的增加新行的事件.
      

  8.   

    var Table = document.getElementById("TABLE");for(var i=0;i<10;i++)
      AddRow();
    function AddRow()
    {
    Table.appendChild(NewRow());
    }function NewRow()
    {
    var r = document.createElement("div");
    r.innerHTML = "<label onclick='javascript:RemoveRow(this.parentNode);'>Remove</label> TEXT";
    return r;
    }function RemoveRow(r)
    {
    Table.removeChild(r);
    }
    可能有点方法名写错，也没完全按照dom的方法来做，反正就是这么个意思... - -
      

  9.   

    <script type="text/javascript">
    var i=1;
            function add() {
                var divobj = document.getElementById("div");
                var div= document.createElement("div");
                div.className = "div";
                div.innerHTML = i+"人<a href='javascript:' onclick='newadd(this)'>增加</a><a href='javascript:' onclick='del(this)'>删除</a>";
                divobj.appendChild(div);
    i++;
            }
            function del(obj) {
                obj.parentNode.parentNode.removeChild(obj.parentNode);
    i--;
            }
    function newadd(obj){
    var div= document.createElement("div");
                div.className = "div";
                div.innerHTML = i+"人<a href='javascript:' onclick='newadd(this)'>增加</a><a href='javascript:' onclick='del(this)'>删除</a>";
                obj.appendChild(div);
    i++;
    }
        </script>
    <input type="button" value="add" onclick="add()"/>
      

  10.   


    自己写着玩的JS操作table,LZ可以看看,也许可以参考一下.本来想直接发的,可是却说内容太多,我懒的分...http://download.csdn.net/source/1105564
      

  11.   


    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>无标题文档 </title> 
    </head> <body> 
    <div id="PersonListPNumberli" class="PersonListPNumber"></div> 
    <div id="PassengerList" style="height:auto;"></div> 
    <script language="javascript" type="text/javascript"> 
    <!-- 
    var tabLen=0
    var PersonListPNumberli = document.getElementById("PersonListPNumberli"); 
    var Li = document.getElementById("PassengerList"); 
    var PassengerLi=""
    +"<table width='500' border='0' cellpadding='0' cellspacing='0' class='Personlistspan' >"
    +"<tr><td height='20' colspan='8'>"
    +"<div class='personlistspanheadtitle'>"
    +"<span class='personlistspanaddtitle'style='float:left;'>当前行 <span></span></span>"
    +"<span class='personlistspanremovepersonbnt' style='float:right;margin-left:20px;cursor:pointer;margin-right:20px;'>删除 </span><span class='personlistspanaddpersonbnt' style='float:right;margin-left:20px;cursor:pointer;'>增加 </span>"
    +"</div></td></tr>"
    +"<tr><td height='35' align='center'> 1：</td><td colspan='7'>&nbsp; </td></tr>"
    +"<tr><td height='35' align='center'> 2：</td><td colspan='7'>&nbsp; </td></tr>"
    +"</table>"; 
     
    AddTableToPassengerList(); 
     
     var k=0
    function AddTableToPassengerList(){//添加人 
    var div = Li.getElementsByTagName("Div"); 
    if(div.length <20){ 
    var objdiv = document.createElement("DIV");
    Li.appendChild(objdiv);
    objdiv.innerHTML= PassengerLi;
    var span = objdiv.getElementsByTagName("Span"); 
    for(var n=0;n <span.length;n++){ 
    if(span[n].className=="personlistspanremovepersonbnt") 
    span[n].onclick=function(){RemoveTabelFromPassengerList(this)}; 
    if(span[n].className=="personlistspanaddpersonbnt") 
    span[n].onclick=function(){AddTableToPassengerList()}; 
    if(span[n].className=="") 
    span[n].innerHTML=div.length; 
    } 
    PersonListPNumberli.innerHTML="共 "+(div.length)+" 人"; 
    }
    else 
    alert("最多只能添加20个人!"); 
    } 
     
    function RemoveTabelFromPassengerList(_this){ //删除人
    var obj=_this
    while(obj.tagName.toLowerCase( )!="table")obj=obj.parentNode
    Li.removeChild(obj.parentNode); 
    var div = Li.getElementsByTagName("Div");
    PersonListPNumberli.innerHTML="共 "+(div.length)+" 人"; 
    } 
    //--> 
    </script> 
    </body> 
    </html> 
      

  12.   

    LS:
     var k=0
    这句没用^_^
      

  13.   

    我也遇到这个问题了 就是动态将jsp加入div  但是jsp的里边的dojo都不能正常执行