用js获取input输入的值以及Button按钮

最新推荐文章于 2024-04-14 17:03:53 发布

阿顿

最新推荐文章于 2024-04-14 17:03:53 发布

阅读量10w+

点赞数 2

文章标签： input button table border email xhtml

本文链接：https://blog.csdn.net/dunyanan1/article/details/7304035

版权

<!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>
<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" οnclick="edit()" value="修改">';

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


}

</script>
</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" οnclick="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" οnclick="edit()" value="修改" /></td>
</tr>
</table>

</body>
</html>

阿顿

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
用js获取input输入的值以及Button按钮

无标题文档 function add(){ //获取输入的值 var name=document.getElementById("name").value; var sex=document.getElementById("sex").value; var phone=document.getElementById("phone").value; var em
复制链接

扫一扫