使用js实现添加信息及变色功能

上周我们写了利用js实现了删除和全选功能，这周我们在上周的基础上进一步加深，对于表单上可以实现添加信息和鼠标滑过时变色的功能

首先我们在table下方添加了一个form，在里面可以添加上table里相应的信息，代码如下

网页效果如下

在这里为了方便观察到变色，我对某些行添加了颜色

• 添加信息

 首先我们的网页初始画面是这样的

接下来使用代码如图

在这里我们对提交按钮添加onclick事件，然后利用getElementById和getElementsByName来获取到文本框中输入的内容，由于信息实在table中，所以我们需要利用createElement来创建tr，td，利用appendChild来添加子节点，利用innerHTML来添加我们获取的文本框内容，需要注意的是我们最后添加的删除是不会实现的，因为删除是利用window.onload实现，文本加载完成后才会运行，但是我们后来添加的内容是在它运行完才添加进去的，所以才无法删除。但是我们可以通过上面的删除所选来进行删除操作。

页面效果如下

• 变色

 在这里的变色就是鼠标移动到哪一行哪一行就变色，移出就会恢复

代码如下

1. 我们需要对相应的tr添加两个事件
2. 接下来在js里定义一个oldcolor来记录之前的颜色
3. 接下来在onmouseover对应的事件中先加入oldcolor=tr.style.background;来记录旧颜色，然后tr.style.background='#E32F34';来添加新颜色
4. 最后在onmouseout事件中添加tr.style.background=oldcolor;使鼠标离开时变回旧颜色

效果如下

当然我们添加进去的信息也是可以变色的，这是只需要在function中添加相应的代码即可

效果如下

 

转载于:https://my.oschina.net/u/3820331/blog/1803210