DEMO_表格操作

最新推荐文章于 2024-05-22 22:57:54 发布

wen_special

最新推荐文章于 2024-05-22 22:57:54 发布

阅读量888

点赞数

CC 4.0 BY-SA版权

分类专栏： demo操作课程设计文章标签： html

本文链接：https://blog.youkuaiyun.com/wen_special/article/details/78451139

demo操作同时被 2 个专栏收录

3 篇文章

订阅专栏

课程设计

3 篇文章

订阅专栏

本文介绍了HTML表格的动态添加、删除、单元格操作及动态生成。通过`insertRow()`、`deleteRow()`等方法实现表格操作，适用于简单管理系统，如课程设计中的人员管理。同时，讲解了如何利用JavaScript实现表格的鼠标事件，并提供了github代码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html中的等标签就可以实现一些简单的操作。那么为什么还需要用复杂的代码去实现那。简单的说，一般的管理系统用动态管理表格还是比较方便的。例如我们的课程设计ttms：添加人员删除人员修改人员之类的。

记录一下这次做的表格操作用到一些demo.

表格的动态添加：主要实现表格的动态添加,动态添加表格的一行，当然这个一行是指一行数据

通过用insertRow()方法实现插入行;通过insertCell()方法实现单元格元素的插入
表格的动态删除：主要通过实现表格的删除操作，删除指定行和删除表格中所有内容

通过使用deleteRow(index)方法删除表格行。index为参数，表示第几行，这个参数时从上向下，由0开始数的，另外有特别需要注意的一点：如果参数不写，则效果与参数为0一样，表示删除最上面一行相对应的是，deleteCol(index)方法是删除单元格
表格的单元行的操作：主要实现表格的鼠标事件。鼠标的移入移出以及鼠标的点击事件

通过方法event.srcElement.tagName方法和event.srcElement.parentElement方法实现。 event是触发事件的源对象，而srcElement则就是选中对象，而parentElement则是选中对象的父层对象；以当前的例子来简单解释的话，就是说，鼠标放上table，从而激活了事件getrow（this），当鼠标放在任一单元格之上时，它的srcElement都是td，它的parentElement也就是tr一行了，则找到一行的对象了
表格的动态生成：通过表格的动态添加实现。利用在上面提到的insertRow()实现。

在html中我们只给出body中的代码，在其中只需要创建一个div,对div进行表格的插入

<body>
    <div id = "create_table"></div>
<body>

js代码中主要的就是实现表格的生成。

createElement()方法实现html中标签的动态创建。
appendChild()方法实现将创建的标签添加给需要对应的父节点
setAttribute(“class”,”value”)方法实现给对应的标签添加属性。class为属性名，value为对应的属性。

    window.onload = function create_table() {
        let table = document.createElement('table');
            for (let i = 1; i <=4; i++) {
                 let row = table.insertRow();
                 for (let j = 1; j <= 2; j++) {
                      let cell = row.insertCell();
                      cell.innerHTML = "这里是"+i +"行" +',' + j+"列";
                     }
                 }
        document.getElementById('createTable').appendChild(table);
        table.setAttribute('border', '1');
    }