HTML にテーブルを動的に追加する方法-htmlチュートリアル-php.cn

HTML にテーブルを動的に追加する方法

墨辰丷

リリース： 2018-06-04 14:44:56

オリジナル

10609 人が閲覧しました

概要: 上記は、HTML にテーブルを動的に追加する方法に関するこの記事の内容全体です。皆さんの学習に役立つことを願っています。関連する推奨事項:

具体的なコードは次のとおりです:

<html>  
    <head><title>Table</title></head>  
    <body>  
        <table border="1">  
            <thead>  
                <tr>  
                    <td>First Name</td>  
                    <td>Last Name</td>  
                    <td> </td>  
                </tr>  
            <thead>  
            <tbody id="tb">  
                <tr id="1st">  
                    <td>张</td>  
                    <td>三</td>  
                    <td><input type="button" value="Add" onclick="add()">   
                    <input type="button" value="Del" onclick="del(this)"></td>  
                </tr>  
            </tbody>  
        </table>  
    </body>  
</html>  
<script>  
    function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = "<td><input name=&#39;firstName&#39;/></td><td><input name=&#39;lastName&#39;/></td><td><input type=&#39;button&#39; value=&#39;Add&#39; onclick=&#39;add()&#39;> <input type=&#39;button&#39; value=&#39;Del&#39; onclick=&#39;del(this)&#39;></td>";  
        document.getElementById("tb").appendChild(trObj);  
    }  
    function del(obj) {  
        var trId = obj.parentNode.parentNode.id;  
        var trObj = document.getElementById(trId);  
        document.getElementById("tb").removeChild(trObj);  
    }  
</script>

ログイン後にコピー

上記のコードでは、後続の操作を容易にするために、最初にテーブルが構築され、テーブルに thead タグと tbody タグが追加されます。 table ヘッダーと tbody タグはテーブルの本体をマークします。

例のテーブルには 3 つの列があり、最初の列は名、2 番目の列は姓、3 番目の列は操作列です。

操作列には 2 つの操作が含まれています。1 つはテーブルに行を追加する操作で、もう 1 つは現在の行を削除する操作です。行の追加と行の削除の操作は、それぞれ 2 つのボタンに関連付けられています。ボタンをクリックすると、対応する行の追加/行の削除操作がトリガーされます。

行追加メソッド

function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = "<td><input name=&#39;firstName&#39;/></td><td><input name=&#39;lastName&#39;/></td><td><input type=&#39;button&#39; value=&#39;Add&#39; onclick=&#39;add()&#39;> <input type=&#39;button&#39; value=&#39;Del&#39; onclick=&#39;del(this)&#39;></td>";  
        document.getElementById("tb").appendChild(trObj);  
    }

ログイン後にコピー

1行目でtr要素、つまりテーブルの行を作成します。

2 行目、trObj.id = new Date().getTime(); id 属性を新しい行に追加し、その属性に値を割り当て、現在のシステムのミリ秒を取得します。 . これは主に必要を削除する場合です。 trObj.id = new Date().getTime(); 给改行添加id 属性，并给属性赋值，取当前系统的毫秒数，这个主要是删除的时候需要。

第三行，trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'>

<input type='button' value='Del' onclick='del(this)'></td>"; 给表格行赋值，通过innerHTMML属性，设置标签和标签间的html代码内容，也就是要添加的行内容。

第四行，document.getElementById("tb").appendChild(trObj); 将创建好的表格行添加到表格主体中。

删除行方法

function del(obj) {  
    var trId = obj.parentNode.parentNode.id;  
    var trObj = document.getElementById(trId);  
    document.getElementById("tb").removeChild(trObj);  
}

ログイン後にコピー

删除方法中传递了一个参数，在添加行方法中，我们可以看到删除方法del 中传递了this参数，页面代码中的this指代的是当前的HTML元素，即this所在的域。

第一行，var trId = obj.parentNode.parentNode.id; 获取当前元素的父节点的父节点的id，即要删除的行的id 。

第二行，var trObj = document.getElementById(trId); 获取要删除的行元素。

第三行，document.getElementById("tb").removeChild(trObj);

3 行目、

trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/>< ;/td><td><input type='button' value='Add' onclick='add()'>

<input type='button' value=' Del' onclick='del(this)'></td>"; テーブルの行に値を割り当て、タグとの間に HTML コードの内容を設定します。 ; innerHTMML 属性を介してタグ、つまり追加される行のコンテンツを指定します。 4行目 document.getElementById("tb").appendChild(trObj); 作成したテーブル行をテーブル本体に追加します。

行の削除メソッド

rrreee

行の追加メソッドでは、このパラメータが削除メソッドの del に渡されていることがわかります。 HTML 要素、つまり、これが配置されているドメイン。

最初の行 var trId = obj.parentNode.parentNode.id; は、現在の要素の親ノードの親ノードの ID、つまり削除する行の ID を取得します。