<HTML>
<HEAD>
<TITLE>dajuji</TITLE>
</head>

<script language="JavaScript">
<!--
var table_count = new Array()
var count = 0;
var cnt = 0;
var country_name="";
var city="";
table_count[0] = 0;

function select_chang(country,selt,index) {
var selt = "document.select_form.formselect" + selt;
var frameobj = eval(selt);
document.select_form.reset(); // select 문의 선택을 reset 한다
frameobj.options[index].selected = true; // 선택되건만 보여진다.
country_name = country;
city = frameobj.options[index].value;

addRow('table_list');
}

function addRow(TableID) {
count++;
cnt++;
table_count[cnt] = count;

var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");

var td1 = document.createElement("TD");

td1body = "<p align='center'> <font size='2'>"+ country_name +"";
td1.insertAdjacentHTML('beforeEnd', td1body );

var td2 = document.createElement("TD");

td2body = "<p align='center'><font size='2'>"+ city + "";
td2.insertAdjacentHTML('beforeEnd', td2body);

var td3 = document.createElement("TD");
td6body = "<p align='center'><input type='button' value='삭제' style='border-width:1px; border-style:solid;' onclick=delRow('" + TableID + "'," + table_count[cnt] +")>";
td3.insertAdjacentHTML('beforeEnd', td6body);

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);

tbody.appendChild(row);
}

function delRow(TableID,num) {
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
for ( var i = 1; i < table_count.length ; i++ ) {
if ( table_count[i] == num ) {
tbody.deleteRow(i); // 테이블 삭제
table_count[i] = 0;
}
}

for ( var i = 1; i < table_count.length ; i++ ) {
if ( table_count[i] == 0) {
cnt = tbody.rows.length-1;
for ( j = i ; j < table_count.length ; j++)
table_count[j] = table_count[j+1];
}
}
}

function cancel(TableID) {
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
var del_cnt = tbody.rows.length;
for ( var i = 1; i < del_cnt; i++ ) {
tbody.deleteRow(1); // 테이블 삭제
}
cnt = 0; // 테이블 관련 번호를 초기화
}
//-->
</script>

<body>

<form name=select_form>
<table border="0" cellpadding="3" cellspacing="0" width="224">
<tr>
<td><b>한국</b></td>
<td><b>중국</b></td>
</tr>
<tr>
<td valign=top>
<select name="formselect0" size="4" style="width:100px;" onchange="select_chang('한국',0,selectedIndex)">
<option value="서울">서울</option>
<option value="인천">인천</option>
<option value="대전">대전</option>
<option value="광주">광주</option>
<option value="대구">대구</option>
<option value="부산">부산</option></select>
</td>
<td valign=top>
<select name="formselect1" size="4" style="width:100px;" onchange="select_chang('중국',1,selectedIndex)">
<option value="베이징">베이징</option>
<option value="텐진">텐진</option>
<option value="상하이">상하이</option>
<option value="충칭">충칭</option>
<option value="하얼빈">하얼빈</option></select>
</td>
</tr>
<tr align=center>
<td colspan=2><input type=button value="전체삭제" style='border-width:1px; border-style:solid;' onclick=cancel("table_list") ></td>
</tr>
</table>

<table id="table_list" border="0" cellpadding="2" cellspacing="0" width="224">
<tbody>
<tr bgcolor="#CCCCCC">
<th>국가</th>
<th>도시</th>
<th>비고</th>
</tr>
</tbody>
</table>
</form>

</body>
</html>