JSJQ-添加表格信息
一、事件委托
1、event对象：事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
2、nodeName 属性指定节点的节点名称。
3、在以往的js事件监听中，用js动态创建的子元素是没有事件的，必须重新为它们绑定事件，但是用事件委托就不用这么麻烦了，不需要重新绑定事件依旧可以实现事件监听。
当然事件绑定也是有弊端的，因为它依赖于事件冒泡，如果不支持冒泡那么就不能实现事件绑定了，不过我认为这种几率还是不高的。还有就是会发生事件误判，比如页面中的button1和button2的作用是点击时弹出值，而button3的作用是点击是页面变色，这三个button的同一个事件实现功能不同，当你将click事件委托给它们共同的父元素那么就会出现事件误判。
所以我认为事件委托是发生在一个子集合的事件功能相同的情况下，如果不相同则不要使用事件委托，以免弄巧成拙。
在实际开发中，掌握事件绑定对于代码的规范性以及效率会有一定提高，总的来说利大于弊。
！！！ - CSS
*{margin:0;padding:0;}
table{border-collapse: collapse;}
th,td{border:1px solid #ccc;padding:5px 25px; }
！！！ -HTML
<input type="text" id="txt" placeholder="输入姓名"/><input type="button" id="btn" value="添加"/>
<table id="tab">
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</thead>
<tbody>
<tr>
<td>01</td>
<td>隔行变色</td>
<td>21</td>
<td><a class="remove" href="#">删除</a></td>
</tr>
<tr>
<td>01</td>
<td>隔行变色</td>
<td>21</td>
<td><a class="remove" href="#">删除</a></td>
</tr>
<tr>
<td>01</td>
<td>隔行变色</td>
<td>21</td>
<td><a class="remove" href="#">删除</a></td>
</tr>
<tr>
<td>01</td>
<td>隔行变色</td>
<td>21</td>
<td><a class="remove" href="#">删除</a></td>
</tr>
</tbody>
</table>
！！！ -JavaScript
window.onload=function()
{
var tab=document.getElementById('tab');
var remove=document.getElementsByClassName('remove');
var bgColor='';
//隔行变色
for(var i=0;i<tab.tBodies[0].rows.length;i++)
{
tab.tBodies[0].rows[i].onmouseover=function()
{
bgColor=this.style.background;
this.style.background='green';
}
tab.tBodies[0].rows[i].onmouseout=function()
{
this.style.background=bgColor;
}
if(i%2==0)
{
tab.tBodies[0].rows[i].style.background='yellow';
}
else
{
tab.tBodies[0].rows[i].style.background='';
}
}
for(var i=0;i<remove.length;i++)
{
remove[i].onclick=function()
{
this.parentNode.parentNode.remove();
}
}
var btn=document.getElementById('btn');
btn.onclick=function()
{
var aTr=document.createElement('tr');
aTr.innerHTML='<td>555</td><td>隔行变色</td><td>21</td><td><a class="remove" href="#">删除</a></td> ';
tab.tBodies[0].appendChild(aTr);
}
}
结果如下：发现添加的行，并没有变颜色，这时候就用函数了，把公共的功能用函数提曲出来
window.onload=function()
{
var tab=document.getElementById('tab');
var remove=document.getElementsByClassName('remove');
var bgColor='';
function addcolor()
{
for(var i=0;i<tab.tBodies[0].rows.length;i++)
{
tab.tBodies[0].rows[i].onmouseover=function()
{
bgColor=this.style.background;
this.style.background='green';
}
tab.tBodies[0].rows[i].onmouseout=function()
{
this.style.background=bgColor;
}
//隔行变色
if(i%2==0)
{
tab.tBodies[0].rows[i].style.background='yellow';
}
else
{
tab.tBodies[0].rows[i].style.background='';
}
remove[i].onclick=function(ev)
{
this.parentNode.parentNode.remove();
}
}
}
addcolor();
var btn=document.getElementById('btn');
btn.onclick=function()
{
var aTr=document.createElement('tr');
aTr.innerHTML='<td>555</td><td>隔行变色</td><td>21</td><td><a class="remove" href="#">删除</a></td> ';
tab.tBodies[0].appendChild(aTr);
addcolor();
}
}
这样新添加的数据也可以删除+隔行变色+鼠标移入+鼠标移除了
这是一种思维，JS为我们提供了一种更好的做法，用事件委托
****事件委托：
ev.target :将事件托付给父级来做
代码如下：
window.onload=function()
{
var tab=document.getElementById('tab');
var bgColor='';
var add=document.getElementById('add');
var move=document.getElementsByClassName('remove');
/*添加*/
add.addEventListener('click',function(){ //addEventListener事件绑定
var aTr=document.createElement('tr');
aTr.innerHTML='<td>555</td><td>隔行变色</td><td>21</td><td><a class="remove" href="#">删除</a></td>';
tab.tBodies[0].appendChild(aTr);
geColor();
})
tab.onclick=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
var tr=target.parentNode.parentNode.nodeName; //TR
if(tr.toLowerCase() == 'tr')
{
//targetA
target.parentNode.parentNode.remove();
}
}
/*鼠标移入*/
tab.tBodies[0].onmouseover=function (ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
var tr=target.parentNode.nodeName;//居然是tr
if(tr.toLowerCase()=='tr')
{
bgColor=target.parentNode.style.background;
target.parentNode.style.background='blue';
}
};
/*鼠标移出*/
tab.tBodies[0].onmouseout=function (ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.parentNode.nodeName.toLowerCase()=='tr')
{
target.parentNode.style.backgroundColor=bgColor;
}
};
/*隔行变色*/
function geColor()
{
for(var i=0;i<tab.tBodies[0].rows.length;i++)
{
if(i%2==0)
{
tab.tBodies[0].rows[i].style.background='#ccc';
}
else
{
tab.tBodies[0].rows[i].style.background='';
}
}
}
geColor();
}
这样一看，好像是完美解决问题了，但可惜，如果在每个TD上都添加A的话，会发现，点击任何一个A，都可以删除一行！！！
这个嘛............让我再想想......
