前端组件练习

Posted 2022-11-25 海鲜小王子

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