자바스크립트를 사용해서 테이블을 동적으로 구성해 본다. 히든항목을 두어서 중복된 코드에 대한 추가를 방지하였다.
▣ DynamicTable.html
<html>
<head>
<title>DynamicTable</title>
<meta name="subject" content="throw new *^^*;">
<meta name="title" content="Dynamic Table">
<meta name="author" content="agapeuni">
<meta name="keywords" content="event, handler">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
body, td {
font-family:verdana;
font-size:12px;
}
</style>
<script for="window" event="onload">
trAdd("SAME_CODE");
</script>
<script language="JavaScript" type="text/JavaScript">
function trAdd(v_code)
{
try
{
var v_TableList = document.getElementById("tbl_list");
var v_CodeList = document.getElementsByName("hdn_code");
var v_col1 = "컬럼1";
var v_col2 = "컬럼2";
var v_col3 = "컬럼3";
for(i = 0; i < v_CodeList.length; i++)
{
if(v_CodeList[i].value == v_code)
{
alert(v_code + "는 이미 존재합니다.");
return;
}
}
v_New_Tr = v_TableList.insertRow(-1);
v_New_Td = v_New_Tr.insertCell(document.createElement("<TD width='100'>"));
v_New_Td.setAttribute("className", "tb_content");
v_New_Td.innerHTML = "<input name='txt_name' type='text' size='7' value='" + v_col3 + "'>";
v_New_Td = v_New_Tr.insertCell(document.createElement("<TD width='100'>"));
v_New_Td.setAttribute("className", "tb_content");
v_New_Td.innerText = "값";
v_New_Td = v_New_Tr.insertCell(document.createElement("<TD width='170'>"));
v_New_Td.setAttribute("className", "tb_content");
v_New_Td.innerText = v_code;
v_New_Td = v_New_Tr.insertCell(document.createElement("<TD width='30'>"));
v_New_Td.setAttribute("className", "tb_content");
v_New_Td.innerHTML = "<input type='checkbox' id='chk_right_team_cd' name='chk_right_team_cd' value=" + v_code + "><input type=hidden name=hdn_code value=" + v_code + ">";
}
catch(e)
{
alert("trAdd() - " + e.message);
}
}
</script>
</head>
<body>
<p>
<input type="button" value="신규코드" onclick="trAdd(new Date().getTime())">
<input type="button" value="같은코드" onclick="trAdd('SAME_CODE')">
</p>
<table style="width:98%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table id="tbl_list" width="400" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#E0E0E0" bordercolordark="#FFFFFF">
<tr style="background-color:#FFFFCC">
<td style="width:30px;height:19px"> </td>
<td style="width:170px;height:19px">코드</td>
<td style="width:100px;height:19px">값</td>
<td style="width:100px;height:19px">항목</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
▣ 페이지 로드
로딩 시에 SAME_CODE로 신규로 자동추가한다.
▣ 신규코드 클릭
신규코드 버튼을 클릭해서 새로운 행을 두 개 추가한다. 이때 코드는 타임스탬프 값을 사용하였다.
▣ 같은코드 클릭
같은 코드 버튼을 클릭하면 위와 같은 메시지가 표시되고 행이 추가되지 않는다.
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 정규표현식 입력검증 (0) | 2023.02.28 |
|---|---|
| [JavaScript] 모달창에 값 주고 받기 (0) | 2023.02.28 |
| [JavaScript] 이벤트 핸들러 [2] (1) | 2023.02.28 |
| [JavaScript] 이벤트 핸들러 [1] (0) | 2023.02.28 |
| [JavaScript] 서브메뉴 동적표시 (SubMenu.html) (0) | 2023.02.28 |
댓글