表格的增加和删除含有鼠标悬浮颜色的变化

最新推荐文章于 2023-03-14 01:13:46 发布

我爱工作&工作love我

最新推荐文章于 2023-03-14 01:13:46 发布

阅读量177

点赞数

分类专栏：前端学习文章标签： html js javascript

本文链接：https://blog.csdn.net/m0_46183615/article/details/108968554

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这个示例展示了如何使用JavaScript动态地在HTML表格中添加和删除行。当页面加载时，鼠标悬停在表格行上会改变背景色。点击'新增表格'按钮可以插入新行，而点击'删除'链接则会删除当前行。功能实现包括找到父节点进行插入和删除操作。

摘要由CSDN通过智能技术生成

表格的增加和删除

涉及小点：
1.表格的增加-插入（一定要找到父节点插入后记得在对应位置
append ）
2.删除是找到父亲的父亲，这样才能删完整行表的内容var tr=obj.parentNode.parentNode;

<!DOCTYPE HTML>
<head>
    <title学生数据表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
//打开页面即可让鼠标悬浮颜色变化
window.onload = function()  
    {
    var tr=document.getElementsByTagName("tr");//查找行里面的元素集合or(var i= 0;i<tr.length;i++)
    for(var i= 1;i<tr.length;i++)
    {
    bgcChange(tr[i]);
    }
    // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
    } 
    //鼠标移动即可改变背景
    function bgcChange(obj)
    {
        obj.onmouseover=function(){
        obj.style.backgroundColor="#f2f2f2";
        }
        obj.onmouseout=function()
        {
        obj.style.backgroundColor="#fff";
        }
    }
var num=3;
//增加函数
function add()
{
    var body=document.body;//建立结点位置 
    var tab=document.getElementById("tab");//找到插入点的父节点的位置
    var tr=document.createElement("tr"); 
    var td1=document.createElement("td");
    var td2=document.createElement("td");
    var td3=document.createElement("td");
    var del=document.createElement("td");
    num+=1;
    //赋值
    td1.innerHTML="zhu"+num;
    td2.innerHTML="000"+num;
    td3.innerHTML="100";
   del.innerHTML="<a href='javascript:;' οnclick='del(this)' >删除</a>";
    //将增加的内容放到对应位置
    tab.appendChild(tr);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(del);
    var tr=document.getElementsByTagName("tr");//查找行里面的元素集合or(var i= 0;i<tr.length;i++)
    for(var i= 1;i<tr.length;i++)
    {
    bgcChange(tr[i]);
    }
}
   // body.appendChild(td);//将结点放入对应位置
    //body.appendChild(td);
    function del(obj)
    {
        var tr=obj.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    } 
</script>
<style>
   
  
   /*表格居中*/
   table
   {
    text-align: center;
       margin:auto;
      
   }
    #tab
    {
    border: black 1.5px solid;
    border-collapse:collapse;
    }
    #containt
    {
        margin-left: 100px;
        border-radius: blue 5px solid;
        padding: 1em;
        -moz-column-count: 3;
  -moz-column-gap: 1em;
  
    }
    tr td,th{
      border:1px solid red;
      
    }
    </style>
</head>

<body >
    <div id="table">
        <!--表格背景颜色直接添加在style即可-->
     
        <table   id="tab" style="background-image: url(./hello-sunshine.jpg);width:1000px;margin:auto;" >
            <tr>
                <!--表头单元格-->
                <th>name</th>
                <th>id</th>
                <th>score</th>
                <th>button</th>   
    
            </tr>
           
            <tr>
                <td>
                    xiao1
                </td>
                <td>
                    0001
                </td>
                <td>
                    100
                </td>
                
                <td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 -->
            </tr>
            <tr>
                <td>
                    xiao2
                </td>
                <td>
                    0002
                </td>
                <td>
                    100
                </td>
                <td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 -->
            </tr>
            <tr>
                <td>
                    xiao3
                </td>
                <td>
                    0003
                </td>
                <td>
                    100
                </td>
                <td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 -->
            </tr>
           
        </table>
        <br/>
        <input type="button" value="新增表格"  onclick="add()" style="margin-left: 30px;position: fixed;" > 
    </div>
   
    
</body>
</html>

整体效果：
在这里插入图片描述

我爱工作&工作love我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的增加和删除含有鼠标悬浮颜色的变化

表格的增加和删除涉及小点：1.表格的增加-插入（一定要找到父节点插入后记得在对应位置append ）2.删除是找到父亲的父亲，这样才能删完整行表的内容var tr=obj.parentNode.parentNode;<!DOCTYPE HTML><head> <title学生数据表</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">&
复制链接

扫一扫

专栏目录