您的位置：首页 > Web前端

前端组件练习

2017-04-24 22:26 176 查看

1.请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

知识点：
标签<table>
、
选择器nth-child
、
选择器:hover

标签table下包含三钟标签：th(head)表格的头，tr(row)表格的行，td表格单元。

<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

:nth-child()选择器是CSS3中的内容，比如p:nth-child(3)是选择在元素p的父元素下(即与p同级)，第3个p元素。

:hover选择器是CSS1中的内容，选择当鼠标指向该元素时。

<table class="table">
<tr><td>11111</td></tr>
<tr><td>22222</td></tr>
<tr><td>33333</td></tr>
<tr><td>44444</td></tr>
</table>

<style>
.table tr:nth-child(2n-1){
background-color:white;
}
.table tr:nth-child(2n){
background-color:grey;
}
.table tr:hover{
background-color:yellow;
}
</style>

2.有一个包含数据列表的页面，数据行数不确定。每一行数据都有一个删除按钮，单击删除按钮删除该列数据，请用JavaScript实现该功能。

知识点：事件代理、DOM操作、IE兼容性

我们可以给每个按钮绑定一个事件，但这样不高效。我们需要使用事件代理（委托），利用事件冒泡，给按钮的上层元素绑定事件，然后根据事件对象event来判断那个按钮被触发了。

IE事件和DOM事件是不一样的，这里我们就需要考虑兼容性的代码。或操作符

||

在兼容性代码中可替代

if else

判断。

//DOM事件中，事件对象会被传入到回调函数中
//IE事件中，如果不是调用attachEvent()函数，获取事件对象就需要访问全局的window.event。
var ev = event || window.event;

//DOM和IE的事件对象属性也不同
//target是DOM事件，srcElement是IE事件。
var target = ev.target || ev.srcElement;

<ul>
<li>一<button>删除一</button></li>
<li>二<button>删除二</button></li>
<li>三<button>删除三</button></li>
</ul>
<script>
window.addEventListener('load', function () {
var ul = document.getElementsByTagName('ul')[0];
ul.addEventListener('click', function (ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
// 当点击的元素===button元素时，移除此button所属的li元素
if (target.tagName.toLowerCase() === 'button') {
var li = target.parentNode;
li.parentNode.removeChild(li);
}
});
});
// 另一种写法(不推荐)：
// window.onload = function () {
//     var btnArr = document.getElementsByTagName('button');
//     for (var i in btnArr) {
//         btnArr[i].onclick = function (ev) {
//             var ev = ev || window.event;
//             var target = ev.target || ev.srcElement;
//             var li = target.parentNode;
//             li.parentNode.removeChild(li);
//         };
//     }
// };
</script>

【Reference】

1. 【前端】2015阿里前端实习生在线笔试题http://www.cnblogs.com/forzhaokang/p/5184682.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端

相关文章推荐

新的分享

章节导航