1. 程式人生 > >用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>無標題文件</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>
[email protected]
</td>
    <td><input type="button" onclick="edit()" value="修改" /></td>
  </tr>
</table>


</body>
</html>

相關推薦

js獲取input輸入以及Button按鈕

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

vue-js獲取input輸入---vue學習筆記

<div id="app"> <input placeholder="str" v-model='str'> <p>{{ ge

小程式獲取input,以及繫結輸入事件

表單提交在前端介面無處不在,我們需要獲取值,監聽輸入的值,提交表單的資料那麼我們現在就試試表單介面,css樣式我就不貼出來了,我主要說明的是js部分的使用 <view class="container" wx:if="{{hasAuthority}}">

js獲取input輸入改變事件的

獲取input改變需要繫結兩個事件 input propertychange $('#skuname').on('input propertychange', function() { var str = $(this).val()

js 獲取input

 var s=document.getElementById("x").value   //獲取輸入框中的值  var s= document.getElementById("x").getAttribute("name"): 獲取已存在的name的值;獲取屬性的長度用len

vue獲取input輸入的問題

公司需要,新學VUE,碰到一些坑記錄下。  多行文字框取值問題。 v-for裡有多行input輸入框,vue怎麼獲取某行的輸入的值,隨便寫了點程式碼,意思就是後臺返回了多行的 list集合,頁面顯示多行輸入框,當修改某行的值時進行校驗,輸入錯誤友好提示下,後邊加個清空按鈕,

JS獲取input標籤的textJS獲取下拉框內容、input控制只能輸入數字等問題彙總

1、在js中如何獲取input標籤的text值 var cgsl = document.getElementsByName("cgsl")[0].value; jsp原始碼為: <span> </span><tr><spa

js響應id事件和獲取input輸入框中class、id的

js響應id事件:記得要在外面多加一個$(function(){ ... });$(function(){ $("#publish").click(function(){ //通過class獲

JS循環獲取input

取值 bsp inpu als 試用 clas class jquer js循環 遍歷class為input-text的文本框,獲取值 $(".input-text").each(function(){ vals+=$(this).val()+‘,‘; }); 當然

js獲取table的js獲取td裏input

table UNC child flask 字符串 doc 變量 lis script 1、如果想讓table具有可以編輯的功能,可以在table裏嵌入input標簽 寫法{{ list_one[1] or ‘‘ }}的作用是,當list_one[1]取值為None時,前端

JS獲取當前頁面的URL以及截取其中的字段

cati 以及 earch 協議 highlight www. kdt pos logs window.location 屬性 描述 hash 設置或獲取 href 屬性中在井號“#”後面的分段。 host 設置或獲取 location 或 URL 的 hostname

jsinput框中傳麻煩

花了將近兩個小時的時間,向input框中賦值倉庫的id,但是一直顯示id為空,後來發現是因為 點選的是這個id的框,that是這個inventoryName的對話方塊, 而我想在第一個InventoryId的對話方塊中賦值,所以一直賦不進去,一開始的賦值語句 下面這兩句

微信小程式獲取input輸入框的

微信小程式獲取input輸入框的值 作者: 輕酌~淺醉 參考:ralStyle貴 官方文件 1,form表單獲取 wxml程式碼 <view class='box'> <form bindsubmit='searchBox'>

JS/jQuery獲取input和清空input的valu

一、獲取input的值 1、通過普通選擇器獲取   通過類選擇器獲取:$('.class').val()   通過id選擇器獲取:$(" #id").val() 2、通過標籤選擇器獲取   $(" in

Selenium獲取input輸入框中的三種方法

input輸入框裡的值,正常通過text等方法獲取不到,所以記錄下來 第一種用jQuery的val方法:   js = "return $('input').val();"   driver.execute_script(js) 第二種用jQuery的attr方法:   

selenium webdriver 獲取input輸入框上的value

獲取雷系一下各種輸入框資料 獲取方法 public static String getInputValue(WebDriver driver ,WebElement element) { JavascriptExecutor javaScriptE

jquery獲取input輸入框中的、radio單選框選中的、checkbox複選框選中的

1)jquery獲取input輸入框中的值 如何用jquery獲取<input id="test" name="test" type="text"/>中輸入的值? $(" #test ").val() $(" input[ name='test' ] ").va

form表單js獲取

<script> function checkForm() { var inputList = document.getElementsByTagName("input");

css設定height:100%,js獲取不到高度問題

工作中用到的amaze ui的popup中的heigh:100%;在專案中我需要獲取大屏popup的高的具體的畫素值,然而我要說的是,總共有兩點:一、用純js獲取obj.style.height、obg.innerHeight和obj.offsetHeight獲取,    c

如何用jquery獲取input輸入框中的

如何用jquery獲取<input id="test" name="test" type="text"/>中輸入的值? $(" #test ").val() $(" input[ name='test' ] ").val() $(" input[ type='t