用js获取input输入的值

最新推荐文章于 2023-12-12 15:24:02 发布

转载最新推荐文章于 2023-12-12 15:24:02 发布 · 235 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1866049/blog/313125

该系统提供了一个简单的界面，用于收集和管理用户的姓名、性别、电话和邮箱信息，并支持添加和修改功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>

</head>


<body>


姓名：<input type="text" id="name"  /><br />
性别：<input type="text" id="sex"  /><br />
电话：<input type="text" id="phone"  /><br />
邮箱：<input type="text" id="email"  /><br />
<input type="button" onclick="add()" value="添加" />


<table width="313" border="1" id="table1">
    <tr>
        <td width="56">姓名</td>
        <td width="41">性别</td>
        <td width="67">电话</td>
        <td width="121">邮箱</td>
        <td width="121">操作</td>

    </tr>

    <tr>
        <td height="28">王某某</td>
        <td>女</td>
        <td>12456747</td>
        <td>133523@qq.com</td>
        <td><input type="button" onclick="edit()" value="修改" /></td>
    </tr>
</table>

<script language="javascript" type="application/javascript">


    function add(){
        //获取输入的值
        var name=document.getElementById("name").value;
        var sex=document.getElementById("sex").value;
        var phone=document.getElementById("phone").value;
        var email=document.getElementById("email").value;

// input.setAttribute("value","修改");

        var table=document.createElement("table");
        //设置table的border
        table.setAttribute("border","1");
        //创建tr
        var tr=document.createElement("tr");

        var enter=new Array();
        enter[0]=document.createTextNode(name);
        enter[1]=document.createTextNode(sex);
        enter[2]=document.createTextNode(phone);
        enter[3]=document.createTextNode(email);


        for(var i=0;i<enter.length;i++){
            //创建td
            var td=document.createElement("td");
            //文本追加到td
            td.appendChild(enter[i]);
            //把td添加到tr
            tr.appendChild(td);

        }
        //insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
        var newtd=tr.insertCell();
        newtd.innerHTML='<input type="button"   onclick="edit()" value="修改">';





        // table.appendChild(tr);
        document.getElementById("table1").appendChild(tr);
        //把table追加到div中
        //document.getElementById("d1").appendChild(table);


    }



</script>
</body>

</html>

转载于:https://my.oschina.net/u/1866049/blog/313125