js获取input输入值及Button按钮的代码

发布时间:2019-08-30编辑:脚本学堂
本文介绍下,用js代码获取input中输入值及button按钮的方法,有需要的朋友参考下。

js获取input中输入值及button按钮,代码如下:

<!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>获取input中输入值及button按钮-www.jb200.com</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"   onclick="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" 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>123@jb200.com</td>
    <td><input type="button" onclick="edit()" value="修改" /></td>
  </tr>
</table>
</body>
</html>