Home > Article > Web Front-end > How to add a line in html

How to add a line in html

藏色散人Original: 2021-06-03 15:22:143736browse

How to add a row in html: first create an HTML sample file; then create a table through the table tag; finally add a row to the table through the js code "function addRow() {...}" method .

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Add a row and delete a row in the html table

Main idea: Now write a section of the HTML code style you want on the page, and then set it to hidden (style ="display: none"). Then get the code in js, process it and rewrite it back to html

How to add a line in 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>

[Recommended learning: html video tutorial]

The above is the detailed content of How to add a line in html. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is email htmlNext article：What is email html

See more

How to add a line in html

Related articles