溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實現(xiàn)動態(tài)表格

發(fā)布時間：2022-01-24 09:21:05 來源：億速云 閱讀：160 作者：kk 欄目：開發(fā)技術(shù)

JavaScript怎么實現(xiàn)動態(tài)表格，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

JavaScript實現(xiàn)動態(tài)表格

（改建版，代碼見最下面）

JavaScript怎么實現(xiàn)動態(tài)表格

基本效果如下

點擊添加，可以將輸入框中的值，新增到表格中；點擊刪除可以刪除本行內(nèi)容。

JavaScript怎么實現(xiàn)動態(tài)表格

代碼如下：

第一種方式（較簡單，建議使用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態(tài)表格02</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="請輸入id值">
    <input type="text" id="name" placeholder="請輸入姓名">
    <input type="text" id="gender" placeholder="請輸入性別">
    <input type="button" id="btn_add" value="添加">
</div>
<table>
    <caption>學(xué)生信息表</caption>
    <tr>
        <th>id號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>001</td>
        <td>小燕子</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td>002</td>
        <td>紫薇</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td>003</td>
        <td>永琪</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td>004</td>
        <td>爾康</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
</table>
<script>
    //使用innerHTML給添加按鈕綁定事件
    var element = document.getElementById("btn_add");
    element.onclick=function(){
        //獲取文本框中的內(nèi)容
        var id = document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;
        //獲取table
        var table=document.getElementsByTagName("table")[0];
        //新增一行
        table.innerHTML+="<tr>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"
            +"<a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">刪除</a></td></tr>";
    }
    //刪除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態(tài)表格02</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="請輸入id值">
    <input type="text" id="name" placeholder="請輸入姓名">
    <input type="text" id="gender" placeholder="請輸入性別">
    <input type="button" id="btn_add" value="添加">
</div>
<table>
    <caption>學(xué)生信息表</caption>
    <tr>
        <th>id號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>001</td>
        <td>小燕子</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td>002</td>
        <td>紫薇</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td>003</td>
        <td>永琪</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td>004</td>
        <td>爾康</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
</table>
<script>
    //使用innerHTML給添加按鈕綁定事件
    var element = document.getElementById("btn_add");
    element.onclick=function(){
        //獲取文本框中的內(nèi)容
        var id = document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;
        //獲取table
        var table=document.getElementsByTagName("table")[0];
        //新增一行
        table.innerHTML+="<tr>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"
            +"<a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">刪除</a></td></tr>";
    }
    //刪除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

簡單解釋

JavaScript怎么實現(xiàn)動態(tài)表格
JavaScript怎么實現(xiàn)動態(tài)表格

刪除的事件綁定在table表格中，注意看！

方式二

只需要在上述基礎(chǔ)上，修改

<script>
        //給添加按鈕綁定事件
        var element = document.getElementById("btn_add");
        element.onclick=function() {
            //獲取文本框的內(nèi)容
            var id = document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;
            //在創(chuàng)建一行表格
            var td_id = document.createElement("td");
            var td_name = document.createElement("td");
            var td_gender = document.createElement("td");
            var td_a = document.createElement("td");
            var ele_a=document.createElement("a");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);
            var name_id = document.createTextNode(name);
            td_name.appendChild(name_id);
            var gender_id = document.createTextNode(gender);
            td_gender.appendChild(gender_id);
            //設(shè)置屬性值
            ele_a.setAttribute("href","javascript:void(0);");
            ele_a.setAttribute("onclick","delTr(this);");
            var text_a=document.createTextNode("刪除");
            ele_a.appendChild(text_a);
            td_a.appendChild(ele_a);
            var tr = document.createElement("tr");
            //添加td到tr中
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);
            //獲取table
            var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr);
        }
        //刪除方法
        function delTr(obj){
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>

簡單解釋 

JavaScript怎么實現(xiàn)動態(tài)表格

改進版

又加了一些新功能：鼠標(biāo)懸停變色，全選，全不選，反選。

效果：框框可以選中，可以全選，可以全不選，可以反選。

JavaScript怎么實現(xiàn)動態(tài)表格

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態(tài)表格02</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="請輸入id值">
    <input type="text" id="name" placeholder="請輸入姓名">
    <input type="text" id="gender" placeholder="請輸入性別">
    <input type="button" id="btn_add" value="添加">
</div>
<table>
    <caption>學(xué)生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>id號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>001</td>
        <td>小燕子</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>002</td>
        <td>紫薇</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>003</td>
        <td>永琪</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>004</td>
        <td>爾康</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
    </tr>
</table>
<div>
    <input type="button" id="selectAll" value="全選">
    <input type="button" id="unSelectAll" value="全不選">
    <input type="button" id="selectRev" value="反選">
</div>
<script>
    //使用innerHTML給添加按鈕綁定事件
    var element = document.getElementById("btn_add");
    element.onclick=function(){
        //獲取文本框中的內(nèi)容
        var id = document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;
        //獲取table
        var table=document.getElementsByTagName("table")[0];
        //新增一行
        table.innerHTML+="<tr>"+"<td><input type=\"checkbox\" name=\"cb\" ></td>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"
            +"<a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">刪除</a></td></tr>";
    }
    //刪除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

    //給前邊的選不選添加事件
    //1.在頁面加載完后綁定事件
    window.onload=function(){
        //給全選按鈕綁定單擊事件
        document.getElementById("selectAll").onclick=function(){
            //獲取所有的checkbox
            var cbs = document.getElementsByName("cb");
            for(var i=0;i<cbs.length;i++){
                cbs[i].checked=true;
            }
        }
        //全部選按鈕綁定事件
        document.getElementById("unSelectAll").onclick=function(){
            var cbs = document.getElementsByName("cb");
            for(var i = 0; i < cbs.length; i++){
                cbs[i].checked=false;
            }
        }
        //反選按鈕綁定事件
        document.getElementById("selectRev").onclick = function(){
            //反選
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                //設(shè)置每一個cb的狀態(tài)為相反
                cbs[i].checked = !cbs[i].checked;
            }
        }
        //第一個的點擊事件
        document.getElementById("firstCb").onclick = function(){
            var cbs = document.getElementsByName("cb");
            //alert("被點擊了");
            //console.log(cbs);
            for (var i = 1; i < cbs.length; i++) {
                //設(shè)置每一個cb的狀態(tài)和第一個cb的狀態(tài)一樣
                cbs[i].checked = this.checked;
            }
        }
        //給所有tr綁定鼠標(biāo)移到元素之上和移出元素事件
        var trs = document.getElementsByTagName("tr");
        //遍歷
        for (var i = 0; i < trs.length; i++) {
            //移到元素之上
            trs[i].onmouseover = function(){
                this.className = "over";
            }
            //移出元素
            trs[i].onmouseout = function(){
                this.className = "out";
            }
        }
    }
</script>
</body>
</html>

最后這個代碼還有點問題，點擊最上邊的框框可以全選或者都不選所有。但是當(dāng)新增幾行之后，這個功能就實現(xiàn)不了了。

新增幾行之后，鼠標(biāo)的懸停變色也不能實現(xiàn)了。

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手