初學js---獲取輸入框中的內容並添加到表格中

時間 2019-11-11 標籤初學 js 獲取輸入框中內容添加表格中

按下添加按鈕將輸入框中的內容添加到表格中：javascript

這裏涉及到的動態建立表格單元的已講略過
html

只講獲取數據添加到表格：經過getElementById（*）.value分別獲取輸入框中的值，經過以上代碼將其加入到表格中java

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取值填入表格</title>
<style>
div{
border:solid #eee 1px;
width:300px;

}
.box1{
margin:auto auto;
}
.box2{
margin:auto auto;
height:300px;
margin-top:100px;
}
table{
border-collapse: collapse; /*當有兩條邊框線時，只顯示一條邊框線*/
border:solid 1px;
padding:10px;
}
tbody{
border:solid 1px;
}
tr,th,td{
border:solid 1px;
padding:10px;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<table>

<thead>
<tr style="background: lightgray;height: 35px;">
<th>姓名</th>
<th>學號</th>
<th>qq號</th>
<th>操做</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td >data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >刪除</a></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >刪除</a></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >刪除</a></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >刪除</a></th>
</tr>
</tbody>
</table>

</div>
<div id="box2" class="box2">
<div>
name:
<input type="text" id="name">
</div>
<div>
number:
<input type="text" id="number">
</div>
<div>
qq_number:
<input type="text" id="qq">
</div>
<input type="button" value="添加" id="add">

</div>
<script type="text/javascript">


var add=document.getElementById('add');
add.onclick=function(){
//1.取輸入框內的值
var name=document.getElementById('name').value;
var number=document.getElementById('number').value;
var qq=document.getElementById('qq').value;
var tr=document.createElement('tr');
tr.innerHTML="<td>"+name+"</td>"+
"<td>"+number+"</td>"+
"<td>"+qq+"</td>"+
"<td><a href='javaScript：void(0);'>刪除</a></td>";

var a=tr.getElementsByTagName("a")[0];
a.href='javaScript:void(0)';
a.onclick=function(){
var r=confirm('是否確認刪除');
if(r){
//刪除
//獲取點擊
var tr=this.parentNode.parentNode;
tbody.removeChild(tr);
}

}
// var tr=document.createElement('tr');
// var nameTd=document.createElement('td');
// var numberTd=document.createElement('td');
// var qqTd=document.createElement('td');
// var aTd=document.createElement('td');
// var a=document.createElement("a");
// a.href='javaScript:void(0)';
// a.innerText="刪除";

//3.建立文本節點    
// var nameText=document.createTextNode(name);
// var numberText=document.createTextNode(number);
// var qqText=document.createTextNode(qq);
//var aText=document.createTextNode("刪除");


//將文本放到相應的td裏面
// nameTd.appendChild(nameText);
// numberTd.appendChild(numberText);
// qqTd.appendChild(qqText);

//aTd.appendChild(a);


//把td加入到tr中
// tr.appendChild(nameTd);
// tr.appendChild(numberTd);
// tr.appendChild(qqTd);
// tr.appendChild(aTd);

var tbody=document.getElementById('tbody');
tbody.appendChild(tr);


}



var tbody=document.getElementById('tbody');    
var links=document.getElementsByTagName('a');

links.href='javaScript:void(0)';
var len=links.length;
for(var i=0;i<len;i++){
var link=links[i];

link.onclick=function (){
//提示用戶是否刪除
var r=confirm('是否確認刪除');
if(r){
//刪除
//獲取點擊
var tr=this.parentNode.parentNode;
tbody.removeChild(tr);
}
}
}

</script>
</body>
</html>

lapp