js-Dom动态创建表格，属性与事件

<SCRIPT LANGUAGE="JavaScript">
function addRow(id)
{
    //获取当前table的第1个tbody
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR");      //创建一行
    var td1 = document.createElement("TD");      //创建一列
    td1.appendChild(document.createTextNode("这是增加的左边的内容"));   //为td1添加文本

    var td2 = document.createElement("TD");      //又创建一个td内容
    td2.appendChild(document.createTextNode("这是增加的右边内容"));    //添加文本

    var mycolor=document.createAttribute("bgcolor");  //创建一个bgcolor的属性
    mycolor.value="red";      //指定属性值为红色
    td2.setAttributeNode(mycolor);    //将此属性邦定于td2上面

    var td3 = document.createElement("TD");   //创建一个新的数据内容
    var myimg = document.createElement("img");    //创建一个img对象
    var imgsrc = document.createAttribute("src");   //创建一个src属性
    imgsrc.value="1.jpg";   //为该属性指定值
    myimg.setAttributeNode(imgsrc);   //将该属性邦定到创建的img对象上面

    var imgw = document.createAttribute("width");   //创建一个src属性
    imgw.value="80";   //为该属性指定值
    myimg.setAttributeNode(imgw);   //将该属性邦定到创建的img对象上面

    var imgh = document.createAttribute("height");   //创建一个src属性
    imgh.value="100";   //为该属性指定值
    myimg.setAttributeNode(imgh);   //将该属性邦定到创建的img对象上面
    td3.appendChild(myimg);   //将该图片放到td3上面

    row.appendChild(td1);   //在tr中加入td1,td2,td3
    row.appendChild(td2);
    row.appendChild(td3);
    tbody.appendChild(row);  //将该行添加到tbody上面
  }
</script>
<a href="#addRow('myTable')">创建表格<tr></a>
<table id="myTable" border="1">
  <tbody>
   
  </tbody>
</table>

************一下代码包含创建事件*************** 

//创建一个新表
  function createTable()
  {
        var oTable=document.getElementById("myTable");
        var oTBody=document.getElementById("tbody");
        var row=oTBody.rows.length;
   
        var oTR=oTBody.insertRow(row);
        var oProInf=oTBody.rows[row].insertCell(0);
        var oPro=document.createElement("input");
       oPro.setAttribute("type","text");
       oPro.setAttribute("className","box box2");
       //注册文本框事件
       oPro.attachEvent("onkeydown",sendRequest);
  
   
       var oBtn=document.createElement("input");
      oBtn.setAttribute("type","button");
      oBtn.setAttribute("className","Mybutton8");
      //oBtn.setAttribute("id","btn"+maxid);
      oBtn.attachEvent("onclick",showDlg);
      oProInf.appendChild(oPro);
      oProInf.appendChild(oBtn);
   
      var oName=oTBody.rows[row].insertCell(1);
      //oName.setAttribute("id","proname"+maxid);
      oName.appendChild(document.createTextNode(" "));
   
     var oUnit=oTBody.rows[row].insertCell(2);
     //oUnit.setAttribute("id","unit"+maxid);
     oUnit.appendChild(document.createTextNode(" "));
   
     var oQty=oTBody.rows[row].insertCell(3);
     var qty=document.createElement("input");
   
     //qty.setAttribute("id","qty"+maxid);
     qty.setAttribute("type","text");
     qty.setAttribute("className","box box2");
     qty.attachEvent("onkeydown",computeMoney);
     qty.attachEvent("onkeydown",createNewRow);
     qty.attachEvent("onkeydown",moveCursor);
   
     qty.attachEvent("onkeykdown",computeTotal2);
     qty.attachEvent("onblur",computeTotal);
     qty.style.visibility="hidden";
     oQty.appendChild(qty);
   
     var oPrice=oTBody.rows[row].insertCell(4);
     oPrice.appendChild(document.createTextNode(" "));
   
     var oTax=oTBody.rows[row].insertCell(5); 
     oTax.appendChild(document.createTextNode(" "));
   
     var oMoney=oTBody.rows[row].insertCell(6);
     oMoney.appendChild(document.createTextNode(" "));
   
     var oDel=oTBody.rows[row].insertCell(7);
     var btnDel=document.createElement("input");
     btnDel.setAttribute("type","button");
     btnDel.setAttribute("className","Mybutton1");
     btnDel.setAttribute("value","删除");
     //注册按钮单击事件,实现删除功能
     btnDel.attachEvent("onclick",delRow);
     oDel.appendChild(btnDel);

  }