마케팅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>
저작자표시 (새창열림)