HTMLに行を追加する方法-フロントエンドQ&A-php.cn

HTMLに行を追加する方法

藏色散人

リリース： 2021-06-03 15:22:14

オリジナル

3765 人が閲覧しました

HTML に行を追加する方法: 最初に HTML サンプルファイルを作成し、次に table タグを使用してテーブルを作成し、最後に JS コード「function addRow() {...」を使用してテーブルに行を追加します。 }" 方法。

HTMLに行を追加する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

HTML テーブルの行の追加と行の削除

主なアイデア: 次に、ページ上に必要な HTML コードスタイルのセクションを記述し、設定します。それを非表示にします (style ="display: none")。次に、js でコードを取得し、処理して、html

HTMLに行を追加する方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新增一行</title>
</head>
<body>
 
<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
 
    <!--这一行是隐藏的,主要用户方便js中获取html代码-->
    <!--##:js中会替换成数字-->
    <tr id="show" style="display: none">
        <td>##</td>
        <td>
            <input id="name##" />
        </td>
        <td>
            <input id="phone##" />
        </td>
        <td>
            <input id="address##" />
        </td>
        <td>
           <button type="button" onclick="deleteRow(&#39;##&#39;)">删除</button>
        </td>
    </tr>
</table>
<button type="button" onclick="addRow()">新增一行</button>
 
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script >
    var index = 0;//初始下标
    var indexArr= new Array();
 
    //新增一行
    function addRow() {
        index++;
        indexArr.push(index);
 
        var showHtml = $("#show").html();
        var html = "<tr id=&#39;tr##&#39;>"+showHtml+"</tr>";
        html = html.replace(/##/g,index);//把##替换成数字
 
        $("#show").before($(html));
 
        console.log("当前下标数组",indexArr);
    }
 
    //删除一行
    function deleteRow(inde){
        $("#tr" + inde).remove();
        var a = indexArr.indexOf(parseInt(inde));
 
        if (a > -1) {
            indexArr.splice(a, 1);
            console.log("当前下标数组",indexArr);
        }
 
    }
</script>
</body>
</html>

ログイン後にコピー

に書き戻します。

[推奨学習: html ビデオチュートリアル ]

以上がHTMLに行を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。