JS DOM之表格操作

时间：2024-01-12 18:43:26

一个能给添加行的表格

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.table{width:100%; border:1px solid #eee; border-collapse:collapse;}

.table > tbody > tr{}

.table > tbody > tr > td{text-align:center; border:1px solid #eee;}

</style>

<script>

window.onload = function(){

    var testTable = document.getElementById("testTable");

    var testBtn = document.getElementById("testBtn");

    var test1 = document.getElementById("test1");

    var test2 = document.getElementById("test2");

    testBtn.onclick = function(){

        var oTr = document.createElement("tr");

        var oTd1 = document.createElement("td");

        oTd1.innerHTML = testTable.tBodies[0].rows.length + 1;

        oTr.appendChild(oTd1);

        var oTd2 = document.createElement("td");

        oTd2.innerHTML = test1.value;

        oTr.appendChild(oTd2);

        var oTd3 = document.createElement("td");

        oTd3.innerHTML = test2.value;

        oTr.appendChild(oTd3);

        testTable.tBodies[0].appendChild(oTr);

    };

};

</script>

</head>

<body>

    test1:<input id="test1" type="text" />

    test2:<input id="test2" type="text" />

    <input id="testBtn" type="button" value="ADD" />

    <table class="table" id="testTable">

        <thead>

            <tr>

                <th>test</th>

                <th>test</th>

                <th>test</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

一个能添加行又能删除行的表格

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.table{width:100%; border:1px solid #eee; border-collapse:collapse;}

.table > tbody > tr{}

.table > tbody > tr > td{text-align:center; border:1px solid #eee;}

</style>

<script>

window.onload = function(){

    var testTable = document.getElementById("testTable");

    var testBtn = document.getElementById("testBtn");

    var test1 = document.getElementById("test1");

    var test2 = document.getElementById("test2");

    var id = testTable.tBodies[0].rows.length + 1;

    testBtn.onclick = function(){

        var oTr = document.createElement("tr");

        var oTd1 = document.createElement("td");

        oTd1.innerHTML = id;

        id++;

        oTr.appendChild(oTd1);

        var oTd2 = document.createElement("td");

        oTd2.innerHTML = test1.value;

        oTr.appendChild(oTd2);

        var oTd3 = document.createElement("td");

        oTd3.innerHTML = test2.value;

        oTr.appendChild(oTd3);

        var oTd4 = document.createElement("td");

        oTd4.innerHTML = '<a href="javascript:;">delete</a>';

        oTr.appendChild(oTd4);

        oTd4.getElementsByTagName("a")[0].onclick = function(){

            testTable.tBodies[0].removeChild(this.parentNode.parentNode);

        };

        testTable.tBodies[0].appendChild(oTr);

    };

};

</script>

</head>

<body>

    test1:<input id="test1" type="text" />

    test2:<input id="test2" type="text" />

    <input id="testBtn" type="button" value="ADD" />

    <table class="table" id="testTable">

        <thead>

            <tr>

                <th>test</th>

                <th>test</th>

                <th>test</th>

                <th>option</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

                <td></td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

                <td></td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

                <td></td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

                <td></td>

            </tr>

            <tr>

                <td>test</td>

                <td>test</td>

                <td>test</td>

                <td></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

一个能搜索的表格

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.table{width:100%; border:1px solid #eee; border-collapse:collapse;}

.table > tbody > tr{}

.table > tbody > tr > td{text-align:center; border:1px solid #eee;}

</style>

<script>

window.onload = function(){

    var testTable = document.getElementById("testTable");

    var txt = document.getElementById("s_text");

    var btn = document.getElementById("search");

    btn.onclick = function(){

        for(var i=0;i<testTable.tBodies[0].rows.length;i++){

            if(testTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase() == txt.value.toLowerCase()){

                testTable.tBodies[0].rows[i].style.background = "yellow";

            }else{

                testTable.tBodies[0].rows[i].style.background = "";

            }

        }

    };

};

</script>

</head>

<body>

    test:<input id="s_text" type="text" />

    <input id="search" type="button" value="Search" />

    <table class="table" id="testTable">

        <thead>

            <tr>

                <th>test</th>

                <th>test</th>

                <th>test</th>

                <th>option</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>test1</td>

                <td>test2</td>

                <td>test3</td>

                <td></td>

            </tr>

            <tr>

                <td>test4</td>

                <td>test5</td>

                <td>test6</td>

                <td></td>

            </tr>

            <tr>

                <td>test1</td>

                <td>test2</td>

                <td>test3</td>

                <td></td>

            </tr>

            <tr>

                <td>test4</td>

                <td>test5</td>

                <td>test6</td>

                <td></td>

            </tr>

            <tr>

                <td>test1</td>

                <td>test2</td>

                <td>test3</td>

                <td></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

除此之外还可以使用search()进行模糊搜索，用split()进行多关键词搜索。

我们可以对表格提供排序服务，我们可以模拟一个List，Table和它的写法一样。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.table{width:100%; border:1px solid #eee; border-collapse:collapse;}

.table > tbody > tr{}

.table > tbody > tr > td{text-align:center; border:1px solid #eee;}

</style>

<script>

window.onload = function(){

    var nl = document.getElementById("numberList");

    var btn = document.getElementById("order");

    btn.onclick = function(){

        var aLi = nl.getElementsByTagName("li");

        var arr = [];

        for(var i=0;i<aLi.length;i++ ){

            arr[i] = aLi[i];

        }

        arr.sort(function(l1,l2){

            var n1 = parseInt(l1.innerHTML);

            var n2 = parseInt(l2.innerHTML);

            return n1 - n2;

        });

        for(var i=0;i<arr.length;i++){

            nl.appendChild(arr[i]);

        }

    };

};

</script>

</head>

<body>

    <input id="order" type="button" value="Order" />

    <ul id="numberList">

        <li>21</li>

        <li>88</li>

        <li>45</li>

        <li>17</li>

        <li>3</li>

    </ul>

</body>

</html>

相关文章