关于javascript的Dom对象的一些操作--html展示

最新推荐文章于 2024-10-05 01:22:45 发布

笑影vod

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量114

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_43692029/article/details/122228108

版权

HTML CSS JavaScript 动态表格前端开发

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>

        table{
            border: 1px solid;
            margin: auto;
            width: 500px;


        }

        td,th{
            border: 1px solid;
            text-align: center;
        }

        div{
            text-align: center;
            margin: 50px;
        }


    </style>
</head>
<body>


<div>
    <input type="text" id="inputid" placeholder="请输入编号" >
    <input type="text" id="inputname" placeholder="请输入姓名" >
    <input type="text" id="inputgender" placeholder="请输入性别" >
    <input type="button" id="addbutton" value="添加" >

</div>

  <table align="center" >

      <tr>
          <th>
              <b>编号</b>
          </th>
           <td>
              <b>姓名</b>
          </td>
           <td>
              <b>性别</b>
          </td>
           <td>
              <b>操作</b>
          </td>


      </tr>


  </table>


<script>

    var addbutton =document.getElementById("addbutton");
    addbutton.onclick=function () {
        //获取table节点，往里面添加各种节点
        var Table=document.getElementsByTagName("table")[0]; //返回的是数组，需要选取对象

        //建立tr节点
        var Tr=document.createElement("tr");


        //获取编号内容并创建编号td节点添加到Tr标签里
        var id=document.getElementById("inputid").value //这里返回的是字符串，需要通过创立Textnode文本节点进行添加到td里
        var td_id= document.createElement("td");
        var textid=document.createTextNode(id);
        td_id.appendChild(textid);
        Tr.appendChild(td_id);


        //获取姓名内容并创建姓名td节点添加到Tr标签里
        var name=document.getElementById("inputname").value
        var td_name= document.createElement("td");
        var textname=document.createTextNode(name);
        td_name.appendChild(textname);
        Tr.appendChild(td_name);


        //获取性别内容并创建性别td节点添加到Tr标签里
        var gender=document.getElementById("inputgender").value
        var td_gender= document.createElement("td");
        var textgender=document.createTextNode(id);
        td_gender.appendChild(textgender);
        Tr.appendChild(td_gender);



        //创建操作按钮，添加到td节点并添加到Tr标签里
        var  td_a=document.createElement("td");
        var Button =document.createElement("a");
        Button.setAttribute("onclick","aler(this);");
        Button.setAttribute("href","javascript:void(0);"); //这里给超链接添加这个是禁止接收返回值
        var text_a=document.createTextNode("删除");
        Button.appendChild(text_a);
        td_a.appendChild(Button);
        Tr.appendChild(td_a);


        //把创建的tr节点添加到table上

        Table.appendChild(Tr);

    }


    //删除方法
    function aler(obj){
        var table=obj.parentNode.parentNode.parentNode;//获取父节点
        var tr=obj.parentNode.parentNode;    //获取要删除的子节点
        table.removeChild(tr);

    }



</script>


</body>
</html>