How to add a line in html-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to add a line in html

藏色散人

Jun 03, 2021 pm 03:22 PM

html

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 .

How to add a line in html

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>

Copy after login

[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 of this Website

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