DEMO_表格操作

来源：互联网发布：高层管理,知乎编辑：程序博客网时间：2024/06/05 23:04

在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');    }

github代码地址：https://github.com/special-wen/demo/tree/master/demo_table

阅读全文

0 0