表格操作实战-优快云博客

本文链接：https://blog.youkuaiyun.com/xiantouxu/article/details/77427857

问题：页面中如下格式的人员信息表格:
实现：假定表格的元素id为person-list,奇数行的class名为odd。请实现如下功能:
+ 选中单选框,点击删除时对应行消失;
+ 点击排序时,按照升序对表格中的每一行进行排序;
+ 点击筛选,籍贯处会变成一个下拉框,选项值为当前表格中锁包含的省份名称,选中某个省份,展示对应省份的人员信息

删除	序号	姓名	年龄排序	籍贯筛选
	1	张三	24	北京
	2	李斯	43	陕西
	3	韩信	49	湖北
	4	宋江	43	山东
	5	李逵	38	青海
	6	林冲	42	北京

<!DOCTYPE html>
<html>
<head>
    <title>表格处理</title>
</head>
<body>

<table id="person-list">
    <thead>
        <tr>
            <td>
                <button id="remove">删除</button>
            </td>
            <td>序号</td>
            <td>姓名</td>
            <td>
                年龄 <button id="sort">排序</button>
            </td>
            <td>
                籍贯 <button id="select">筛选</button>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>1</td>
            <td>张三</td>
            <td>24</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>2</td>
            <td>李斯</td>
            <td>43</td>
            <td>陕西</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>3</td>
            <td>韩信</td>
            <td>49</td>
            <td>湖北</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" checked>
            </td>
            <td>4</td>
            <td>宋江</td>
            <td>43</td>
            <td>山东</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>5</td>
            <td>李逵</td>
            <td>38</td>
            <td>青海</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>6</td>
            <td>林冲</td>
            <td>42</td>
            <td>北京</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">

   window.onload = function(){

    var removeButton = document.getElementById("remove");
    removeButton.addEventListener("click",getSelectedRows,false);
    var sortButton = document.getElementById("sort");
    sortButton.addEventListener("click",sortByAge,false);
    var selectButton = document.getElementById("select");
    selectButton.addEventListener("click",selectPro,false);
}

//点击单选框，点击删除时删除对应的行
//获取选中的行
function getSelectedRows(){
    var table = document.getElementById("person-list");
    var inputs = document.getElementsByTagName("input");
    console.log(inputs);
    for(var i = 0;i<inputs.length;i++){

        if(inputs[i].checked == true){
            console.log(i);

            //如果当前行被选中，则给删除按钮添加响应事件
            var parentTr = inputs[i].parentNode.parentNode;
            var tbody = parentTr.parentNode;
            tbody.removeChild(parentTr);
            i--;//注意会更新length
        }
    }

}
//按年龄排序
function sortByAge(){
    var table = document.getElementById("person-list");
    var inputs = document.getElementsByTagName("input");
    console.log(inputs);
    //var tbody = table.getElementsByTagName("tbody");
    //使用冒泡排序
    for(var i = 0;i<inputs.length;i++){
        //如果当前行被选中，则给删除按钮添加响应事件
        var currentTr = inputs[i].parentNode.parentNode;
        var ageTd = currentTr.getElementsByTagName("td")[3];
        var age = ageTd.innerText;

        for(var j = i+1;j<inputs.length;j++){
            var nextTr = inputs[j].parentNode.parentNode;
            var nextAge = nextTr.getElementsByTagName("td")[3].innerText;
            if(age >nextAge){
                //如果当前值大于下一个值，则交换，将下一行插入到当前行前面，同时删除下一行
                var tbody = currentTr.parentNode;
                tbody.insertBefore(nextTr,currentTr);
            }
        }   
    }
    //更新序号
    for(var i =0;i<inputs.length;i++){
        var currentTr = inputs[i].parentNode.parentNode;
        currentTr.getElementsByTagName("td")[1].innerText = i+1;
    }

}
//点击筛选,籍贯处会变成一个下拉框,选项值为当前表格中锁包含的省份名称,选中某个省份,展示对应省份的人员信息
function selectPro(){
    console.log("ddd");
    var selectDiv = document.createElement("div");
    selectDiv.id = "selectDiv";

    //新建一个select
    var  select = document.createElement("select");
    //遍历表格获取select的选项
    var table = document.getElementById("person-list");
    var inputs = document.getElementsByTagName("input");

    var selectValues = new Array();
    for(var i =0;i<inputs.length;i++){
        var tr = inputs[i].parentNode.parentNode;
        var proValue = tr.getElementsByTagName("td")[4].innerText;
        if(selectValues.indexOf(proValue) == -1){
            //如果在数组中没有此元素，则追加
            selectValues.push(proValue);

        }
    }
    for(var elem in selectValues){
        console.log(selectValues);
        var option = document.createElement("option");
        option.innerHTML = selectValues[elem];
        option.value =selectValues[elem];
        select.appendChild(option);
    }


    selectDiv.style.display = "inline";

    selectDiv.appendChild(select);
    var parent = this.parentNode;
    //去掉籍贯两个字
    for(var x =0;x<parent.childNodes.length;x++){
        if(parent.childNodes[x].nodeType =="3"){
            parent.removeChild(parent.childNodes[x]);
            x--;
        }
    }
    parent.insertBefore(selectDiv,parent.childNodes[0]);
    //监听select的onchange事件
    var trs = document.getElementsByTagName("tr");
    console.log(trs);
    select.onchange = function(){
        for(var i =1;i<trs.length;i++){
            trs[i].style.display = "none";
            if(trs[i].getElementsByTagName("td")[4].innerText == select.value){
                trs[i].style.display = "";
            }
        }
    }
}

</script>
</body>
</html>