用dom追加实现添加表格每一行

来源:互联网 发布:淘宝全屏详情页 编辑:程序博客网 时间:2024/06/05 08:30
   实现追加:
            1)获取原来数据
            2)原来的数据+新的内容 写入到文本节点中

dom访问常见属性

添加节点:1)创建元素节点  createElement("元素的名称") 创建是个标签 
        2)创建文本节点  createTextNode("文本的内容"); 创建的是内容 
 添加节点方法: 使用 appendChild 把我们定义好的元素节点
 或者是 文本节点 向当前元素节点的最后一个子节点之后添加节点(追加节点) 
 appendChild格式  当前节点(父)  新节点(等待追加)

<script language="javascript" type="text/javascript">
function addTable(){
//获取输入的值
   var name=document.getElementById("name").value;
   var sex=document.getElementById("sex").value;
   var year=document.getElementById("year").value;
   var address=document.getElementById("address").value;
  
   var table=document.createElement("table");
   //设置table的border
    table.setAttribute("border","1");
    //创建tr
    var tr=document.createElement("tr");
   
    //创建text
    var p=new Array();
    p[0]=document.createTextNode(name);
    p[1]=document.createTextNode(sex);
    p[2]=document.createTextNode(year);
    p[3]=document.createTextNode(address);
    for(var i=0;i<p.length;i++){
     //创建td
    var td=document.createElement("td");
     //文本追加到td
    td.appendChild(p[i]); 
    //把td添加到tr
    tr.appendChild(td);

}
  document.getElementById("table1").appendChild(tr);
}
</script>
                                           

原创粉丝点击