思路就是给一个按钮添加一个时间onclick,并调用一个函数;

后来再慢慢的优化。

 

首先建立一个表格:

<body>
姓名:<input id="name" type="text"/>
年龄:<input id="age" type="text"/>
<input id="btn1" type="button"value="添加"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
</tr>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
</tr>
</tbody>

是声明一些变量;

var oTab=document.getElementById('tab1');

var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');

然后再给oBtn加一个onmouseover/out的事件,并调用函数:

            oBtn.onclick= function () {
var oTr=document.createElement('tr')

var oTd=document.createElement('td')
oTd.innerHTML=oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);

var oTd=document.createElement('td')
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);

var oTd=document.createElement('td')
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);

oTab.tBodies[0].appendChild(oTr) //这里的tBodies[0] 一定不能忘记写了,否则就第一行就一直是7,的数字,不会增加7-8-9这种。
; }

这时候已经可以实现表格的添加功能了;

(其中用的是表格的简写方法:http://taobao.fm/archives/785)

全局的代码是:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function () {
var oTab=document.getElementById('tab1');

var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');

oBtn.onclick= function () {
var oTr=document.createElement('tr')

var oTd=document.createElement('td')
oTd.innerHTML=oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);

var oTd=document.createElement('td')
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);

var oTd=document.createElement('td')
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);

oTab.tBodies[0].appendChild(oTr) //这里的tBodies[0] 一定不能忘记写了,否则就第一行就一直是7,的数字,不会增加7-8-9这种。
; }
}
</script>
</head>
<body>
姓名:<input id="name" type="text"/>
年龄:<input id="age" type="text"/>
<input id="btn1" type="button"value="添加"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
</tr>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
</tr>
</tbody>
</table>

</body>
</html>

然后再做添加后的删除功能

为了更好的演示删除,需要增加一列,(tHead名是操作)

增加的时候,总价的就不是3列了,而是四列。第四列增加的是一个删除按钮,按钮上几个herf,herf链接的是”javascript:;”这个可以保证点击没有完全反应,不会重新加载页面;

<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
var oTd=document.createElement('td')
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);

这时候,基本的框架已经出来了;

然后我们给<a>上面添加一个onclick删除功能的函数;

oTd.getElementsByTagName('a')[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode); //这里的tBodies一定不能忘记;
};

完整代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function () {
var oTab=document.getElementById('tab1');

var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');

oBtn.onclick= function () {
var oTr=document.createElement('tr')

var oTd=document.createElement('td')
oTd.innerHTML=oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);

var oTd=document.createElement('td')
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);

var oTd=document.createElement('td')
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);

var oTd=document.createElement('td')
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);

oTd.getElementsByTagName('a')[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode); //这里的tBodies一定不能忘记;
};

oTab.tBodies[0].appendChild(oTr) //这里的tBodies[0] 一定不能忘记写了,否则就第一行就一直是7,的数字,不会增加7-8-9这种。
; }
}
</script>
</head>
<body>
姓名:<input id="name" type="text"/>
年龄:<input id="age" type="text"/>
<input id="btn1" type="button"value="添加"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
<td></td>
</tr>
</tbody>
</table>

</body>
</html>

这个代码可以添加,也可以删除了;但是添加四五行以后,如果我们删除中间的某一行。再继续添加,新出现行的ID就又是按照.rows.length+1计算了,这时候就不是我们想到的ID了。

描述:出现1.2.3.4.5.7.8.8.9.并不是1.2.3.4.5.7.8.9这种;

然后我们进行优化:

优化思路:声明一个函数把增加的号码存起来;

var id=oTab.tBodies[0].rows.length+1

然后引用的时候,用自增的方法把他给不断的增加:

oTd.innerHTML=id++;

这样以后增加,都是在id的基础上自增;已经删除的ID就不在重新用了;

这个思路和表格高亮的BUG思路是差不多的;

http://taobao.fm/archives/792

·····