JS练习_增删操作学生信息

制作一个表格，显示班级的学生信息。

要求：

  1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff

  2. 点击添加按钮，能动态在最后添加一行

  3. 点击删除按钮，则删除当前行
    预览

    源码：

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript">
      window.onload = function(){
           var trs = document.getElementsByTagName('tr');
           for(var i = 1; i < trs.length; i++){
                trs[i].onmouseover = function(){
                     this.style.backgroundColor = "#f2f2f2";
                }
                trs[i].onmouseout = function(){
                     this.style.backgroundColor = "#fff";
                }
          }
        }

     function addTo(){
           var table = document.getElementById('table').lastChild;

           var tr = document.createElement('tr');

           var td = document.createElement('td');
           td.innerHTML="<input type = 'text' />";
           tr.appendChild(td);

           td = document.createElement('td');
           td.innerHTML="<input type = 'text' />";
           tr.appendChild(td);

           td = document.createElement('td');
           td.innerHTML='<a href="#" onclick = "deleteItem(this);return false;" >删除</a>';
           tr.appendChild(td);

           table.appendChild(tr);
          }

      function deleteItem(obj){
            var table = document.getElementById('table').lastChild;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);

      }
  </script>
 </head>
 <body>
     <table border="1" width="50%" id="table">
     <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>操作</th>
     </tr>

    <tr>
    <td>xh001</td>
    <td>王小明</td>
    <td><a href="#" onclick = "deleteItem(this);return false;" >删除</a></td>
     </tr>

     <tr>
    <td>xh002</td>
    <td>刘小芳</td>
    <td><a href="javasript:;" onclick = "deleteItem(this);" >删除</a></td>
     </tr>
     </table>
     <input type="button" value="添加一行"  onclick = "addTo();"/>
 </body>
</html>
posted @ 2021-10-29 15:15  博客zhu虎康  阅读(315)  评论(0)  编辑  收藏  举报