티스토리 뷰

마케팅IT

jquery css 동적 테이블 전체 소스

xemaker 2023. 7. 13. 13:00

dynamic_table.zip
0.07MB

<html>
    <head>
        <style>
			.flex-container{
				//width: 1200px;
				width: 100%;
				//height: 500px;
				height: 100%;
				//margin: 10px;
				//padding: 10px;
				border-radius: 5px;
				//background: #60B99A;

				display: flex;
				//flex-direction: column;
				flex-wrap: nowrap;
	//          flex-wrap: wrap;
	//          align-items: stretch;
				align-items: flex-start;
	//          align-items: flex-end;
				align-items: center;
	//          align-items: baseline;

				//align-content:stretch;
	//          align-content: space-between;
			}
			.flex-item{
				//order:1;
				width: 150px;
				//height: 300px;
				height: 90%;
				margin: 10px;
				padding: 10px;
				//color:#fff;
				text-align: center;
				border-radius: 5px;
				//background: #4584b1;
			}
			.flex-item2{
				flex-grow: 2;
				//flex-shrink: -1;
				//width: 600px;
				width: 80%;
				//height: 300px;
				height: 90%;
				margin: 10px;
				padding: 10px;
				//color:#fff;
				//text-align: center;
				border-radius: 5px;
				//background: #4584b1;
			}
		
            table{
                border-collapse: collapse;
            }
            th{
                background-color:snow;
                width: 200px;
            }
            .line{
                border: 1px solid black;
            }
            a{
                text-decoration: none;
                color: blue;
            }
			#txtSearch{
				height:30px;
			}
			#submit{
				height:30px;
			}
        </style>
        <script src="jquery.min.js"></script>
        <script>
		
			var linkLisk=null;

			function getLink(){
				$(".link").empty();
				var name = $('#txtSearch').val();
				if(name.length>=1){
					$.ajax({
						url:"naver_link.php",
						data:'name='+name,
						success:function(result){
							$(".link").append(result);
						}
					});
					trCreate(name);
				}
			}

            function trCreate(name){
				var obj=null;
				$.ajax({
					url:"naver_ad.php",
					data:'name='+name,
					success:function(result){
						obj = JSON.parse(result);
						var html='';
						html += '<tr>';
						html += '<td class=line>'+obj.name+'</td>';
						html += '<td class=line>'+obj.pct+'</td>';
						html += '</tr>';
						$("#dynamicTable").append(html);
					}
				});
				$('#txtSearch').val("");
				
				
            }
        </script>
     </head>
    <body>
	
	<div class="flex-container">
        <div class="flex-item">
			<div>11111</div>
			<div>22222</div>
		</div>
        <div class="flex-item2">
			<div>
				<input type="text" id="txtSearch" name="txtSearch" placeholder="search" onkeypress="if(event.keyCode==13){ getLink(); return false;}" autofocus>
				<button id="submit" onclick="getLink()">검색</button>
			</div>
			<div>&nbsp;</div>
			<div class="link">
				<?
					//echo '<a href="#" onclick="javascript:trCreate(\'홍길동\')">홍길동</a>';
				?>
			
			</div>
			<div class="div">&nbsp;
			</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>
		</div>
    </div>
	
	
		
    </body>
</html>
저작자표시

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

VM345:1 Uncaught SyntaxError: Unexpected end of JSON input  (0) 2023.07.14
카페24 호스팅에 올렸는데 file_get_html 안되요  (0) 2023.07.14
css jquery html 동적 테이블 row 만들기  (0) 2023.07.07
자바 바탕화면 경로 구하기  (0) 2023.06.29
자바 엑셀 poi 테두리 넣는 방법  (0) 2023.06.29
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함