首先是html部分
<div>
<label for="">用戶名：</label>
<input type="text" id="txt1">
<label for="">年齡：</label>
<input type="text" id="txt2">
<button id="btn" onclick="times()" >添加</button>
<table>
<thead>
<tr>
<th>編號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody id="box">
</tbody>
</table>
</div>
這個(gè)很簡(jiǎn)單大家都一眼看得懂！我就不做過(guò)多的解釋了。
下面對(duì)我們的表格簡(jiǎn)單的布一下樣式
代碼如下：
<style>
div {
text-align: center;
}
table {
width: 640px;
border: 1px solid gray;
border-collapse: collapse;
margin: 50px auto;
}
thead tr {
background: #ccc;
}
th,
td {
width: 160px;
line-height: 35px;
border: 1px solid gray;
text-align: center;
}
</style>
css樣式也是寫(xiě)的很簡(jiǎn)單，就簡(jiǎn)單的布一下樣式，我們先運(yùn)行一下看看是什么樣子的!
代碼如下：
我一步一步解釋各部分的功能
<script>
var txt1 = document.getElementById('txt1'); //找到用戶輸入的文本框；
var txt2 = document.getElementById('txt2');
var btn = document.getElementById('btn'); //獲取點(diǎn)擊按鈕；
var box = document.getElementById('box'); //獲取要添加的表格的地方；
var n=0;
btn.onclick = function () { //創(chuàng)建一個(gè)點(diǎn)擊事件
n++; //這個(gè)是計(jì)算按鈕點(diǎn)擊次數(shù)的，為了輸出添加的編號(hào)；
var txt_1 = txt1.value; //獲取用戶輸入的用戶名；
var txt_2 = txt2.value; //獲取用戶輸入的年齡；
//下面的if語(yǔ)句是為了讓用戶名和年齡都有內(nèi)容才能添加，否則不添加；
if ((txt_1 != '') && (txt_2 != '') && (txt_1 != ' ') && (txt_2 != ' ')) {
var oTr = document.createElement("tr");//創(chuàng)建一個(gè)行（tr）
var oTd0 = document.createElement('td');//創(chuàng)建一列（td）
var oTd1 = document.createElement('td');//創(chuàng)建一列（td）
var oTd2 = document.createElement('td');//創(chuàng)建一列（td）
var oTd3 = document.createElement('td');//創(chuàng)建一列（td）
var A = document.createElement('a');//創(chuàng)建一個(gè)行元素（a）
oTd3.appendChild(A);//把超鏈接放到最后一個(gè)列中；
oTr.appendChild(oTd0)//把創(chuàng)建的列放到行中；
oTr.appendChild(oTd1);//把創(chuàng)建的列放到行中；
oTr.appendChild(oTd2);//把創(chuàng)建的列放到行中；
oTr.appendChild(oTd3)//把創(chuàng)建的列放到行中；
box.appendChild(oTr);//把創(chuàng)建的表格放到我們需要放的地方；
A.href = "javascript:viod(0)" //把這個(gè)行元素變?yōu)槌溄樱? A.innerHTML = '刪除'; //為超鏈接里加入刪除內(nèi)容；
//下面我們可以根據(jù)我們創(chuàng)建的刪除鍵來(lái)計(jì)算每一行表格的位置；
//并把我們獲取的用戶輸入的內(nèi)容添加到固定的位置；
for (var i = 0; i < document.links.length; i++) {
//console.log(document.links[i]);
var I = 0;
I = i;
} //document.links.length可以得到我們創(chuàng)建的超鏈接的個(gè)數(shù)；
var Ab = document.links[I];//得到每一個(gè)超鏈接在的行數(shù)；
var td_1 = Ab.parentNode.previousSibling;
var td_2 = td_1.previousSibling;
var td_3 = td_2.previousSibling;
//console.log(td_1,td_2);
td_1.innerHTML = txt_2;
td_2.innerHTML = txt_1;
td_3.innerHTML = n;
//上面的代碼就能準(zhǔn)確的將我們得到的用戶名，年齡和編號(hào)放到合適的位置；
//下面是當(dāng)我們點(diǎn)刪除的時(shí)候能夠刪除我們輸入的內(nèi)容 同時(shí)刪除這一行表格；
for (var a = 0; a < document.links.length; a++) {
var Aa = document.links[a];
Aa.onclick = function () {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
}
}
</script>
到這里我們的代碼就編寫(xiě)完畢了；
可以先看看運(yùn)行后的效果：
當(dāng)我們把編號(hào)3和編號(hào)5刪除以后：
然后再繼續(xù)點(diǎn)擊添加：
編號(hào)從6開(kāi)始添加，前面我們雖然刪除了3 和5，但是編號(hào)3和5已被占用。
---------------------------------------ennnnnn…結(jié)束-------------------------------------------
