原生DOM接口学习之实现表格的排序

来源：互联网发布：ts合并软件安卓版编辑：程序博客网时间：2024/06/05 03:41

一原生DOM接口介绍

节点的增删改查

a.增加节点
在DOM上添加节点首先需要创建节点，document.createElement()用于创建元素节点，document.createTextNode()用于创建文本节点。然后使用element.appendChild()、element.insertBefore()添加节点。
b.删除节点 element.removeChild()用于删除子节点,element.replaceChild()用于替换子节点
c.修改节点，element.setAttribute()用于修改节点属性,element.removeAttribute()用于删除节点属性
d.查找结点
1. 根据ID查找节点：document.getElementById()
2. 根据标签名查找节点：document.getElementsByTagName()
3. 根据Name属性查找结点；document.getElementsByName()
4. 根据Class属性查找节点document.getElementsByClassName()
5. 查找父节点：element.parentNode
6. 查找子节点：element.childNodes,element.firstChild,element.lastChild
7. 查找兄弟节点：element.nextSibling,element.previousSibling

二实现表格数据的排序与动态添加

表格如下图所示，我们可以向表格动态添加数据，也可以让表格的数据按照某列降序排列。
这里写图片描述

1.动态添加数据的函数

当点击添加按钮时候触发的函数。

function addTableRow(){    var stu_name = document.getElementById('stu-name'),//学生姓名输入框        grade_ch = document.getElementById('grade-ch'),//语文成绩输入框        grade_en = document.getElementById('grade-en'),//英语成绩输入框        grade_ma = document.getElementById('grade-ma'),//数学成绩输入框        grade_total = parseInt(grade_ch.value) + parseInt(grade_ma.value) + parseInt(grade_en.value),//总分        mytable = document.getElementById('mytable'),        tbody = mytable.getElementsByTagName('tbody')[0],        newItem = document.createElement('tr');//新的一行        newItem.innerHTML = "<td>" + stu_name.value + "</td><td>" + grade_ch.value + "</td><td>" +           grade_ma.value + "</td><td>" + grade_en.value + "</td><td>" + grade_total + "</td>";        tbody.appendChild(newItem);//添加新的一行        //添加完成输入框置空        stu_name.value = "";        grade_ch.value = "";        grade_en.value = "";        grade_ma.value = "";}

2.表格排序的函数

当点击排序按钮时候触发的函数。

function tableSort(){    var myselect = document.getElementById('myselect'),        mytable = document.getElementById('mytable');    if(!mytable || !myselect){        return;    }    var value = myselect.value;    //根据下拉框选择根据什么进行排序    switch(value){        case "english":sortByNum(3);break;        case "chinese":sortByNum(1);break;        case "math":sortByNum(2);break;        case "total":sortByNum(4);break;        default:alert('选择错误！');break;    }}function sortByNum(colCnt){    var mytable = document.getElementById('mytable'),        tbody = mytable.getElementsByTagName('tbody')[0],        lists = tbody.getElementsByTagName('tr'),//表格的所有行        newLists = [],//把lists拷贝到数组中，方便排序，同时也减少访问DOM次数。        newTbody = document.createElement('tbody');    //将表格的所有行复制到数组newLists中    for(let i = 0, len = lists.length; i < len; i ++){        newLists.push(lists[i].cloneNode(true));    }    //对数组newLists进行冒泡排序    for(let i = 0; i < newLists.length - 1; i++){        for(let j = 0; j < newLists.length - 1 - i; j++){            let value1 = parseInt(newLists[j].getElementsByTagName('td')[colCnt].innerHTML);            let value2 = parseInt(newLists[j+1].getElementsByTagName('td')[colCnt].innerHTML);            if(value2 > value1){                let t = newLists[j+1];                newLists[j+1] = newLists[j];                newLists[j] = t;            }        }    }    //将排序过的行添加到新的tbody中    for(let i = 0,len = newLists.length; i < len; i++){        newTbody.appendChild(newLists[i]);    }    //新的tbody替换旧的tbody    tbody.parentNode.replaceChild(newTbody,tbody);}

3.表格的HTML结构

<!DOCTYPE html><html><head>    <title>dylist</title>    <style type="text/css"></style>    <style type="text/css">        .mydiv{            text-align: center;        }        #mytable{            margin: 20px auto;        }        label{            line-height: 34px;        }        #mytable tbody tr{            position: relative;        }        .delete{            position: absolute;            top: 50px;            left: 50px;        }    </style></head><body><div class="mydiv">    <label for="stu-name">姓名：</label><input type="text" id="stu-name"><br>    <label for="grade-ch">语文：</label><input type="text" id="grade-ch"><br>    <label for="grade-ma">数学：</label><input type="text" id="grade-ma"><br>    <label for="grade-en">英语：</label><input type="text" id="grade-en"><br>    <input type="button" value="添加" onclick="addTableRow()">    <table border="1" cellpadding="6" cellspacing="8" id="mytable">      <caption>学生成绩表</caption>      <thead>        <tr>          <th>姓名</th>          <th>语文</th>          <th>数学</th>          <th>英语</th>          <th>总分</th>        </tr>      </thead>      <tbody>        <tr>          <td>张三</td>          <td>80</td>          <td>90</td>          <td>70</td>          <td>240</td>        </tr>        <tr>          <td>李四</td>          <td>70</td>          <td>80</td>          <td>80</td>          <td>230</td>        </tr>        <tr>          <td>王五</td>          <td>90</td>          <td>90</td>          <td>80</td>          <td>260</td>        </tr>      </tbody>    </table>    按&nbsp;    <select id="myselect">        <option value="chinese">语文</option>        <option value="math">数学</option>        <option value="english">英语</option>        <option value="total">总分</option>    </select>&nbsp;成绩&nbsp;<input type="button" value="排序" onclick="tableSort()"></div></body></html>

0 0

原生DOM接口学习之实现表格的排序

一 原生DOM接口介绍

节点的增删改查

二 实现表格数据的排序与动态添加

1.动态添加数据的函数

2.表格排序的函数

3.表格的HTML结构

一原生DOM接口介绍

二实现表格数据的排序与动态添加