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，都可以删除一行！！！

这个嘛............让我再想想......