HTML에 줄을 추가하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

HTML에 줄을 추가하는 방법

藏色散人

Jun 03, 2021 pm 03:22 PM

html

html에 행을 추가하는 방법: 먼저 HTML 샘플 파일을 만든 다음 테이블 태그를 통해 테이블을 생성하고 마지막으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.