티스토리 뷰

마케팅IT

css jquery html 동적 테이블 row 만들기

xemaker 2023. 7. 7. 17:57 
<html>
    <head>
        <style>
            table,td{
                border-collapse: collapse;
            }
            th{
                background-color:snow;
                width: 200px;
            }
            .line{
                border: 1px solid black;
            }
            a{
                text-decoration: none;
                color: black;
            }
        </style>
        <script src="jquery.min.js"></script>
        <script>
            function tableCreate(name,dept){
                var html='';
                html += '<tr>';
                html += '<td class=line>'+name+'</td>';
                html += '<td class=line>'+dept+'</td>';
                html += '</tr>';
                $("#dynamicTable").append(html);
            }

            function trCreate(name,dept){
                var name=name;
                var dept=dept;
                
                var html='';
                html += '<tr>';
                html += '<td class=line>'+name+'</td>';
                html += '<td class=line>'+dept+'</td>';
                html += '</tr>';
                $("#dynamicTbody").append(html);
            }
        </script>
     </head>
    <body>
        <div>
            <a href="#" onclick="javascript:tableCreate('홍길동','경영')">홍길동</a>
            <a href="#" onclick="javascript:tableCreate('bb','zz')">bb</a>
        </div>
        <div>
            <table class="line" id="dynamicTable">
                <thead>
                    <tr>
                        <th class="line">이름</th>
                        <th class="line">부서</th>
                    </tr>
                </thead>
                <tbody id="dynamicTbody" style="border: 1px solid black;">
                </tbody>
            </table>
        </div>
    </body>
</html>
저작자표시

'마케팅IT' 카테고리의 다른 글

카페24 호스팅에 올렸는데 file_get_html 안되요  (0) 2023.07.14
jquery css 동적 테이블 전체 소스  (0) 2023.07.13
자바 바탕화면 경로 구하기  (0) 2023.06.29
자바 엑셀 poi 테두리 넣는 방법  (0) 2023.06.29
자바 파일 띄우는 실행하는 방법  (0) 2023.06.28
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함