쓸만한 주저리

동적 테이블 생성 예제

봄돌73 2005. 12. 27. 21:57
xml 파일


<?xml version="1.0" encoding="EUC-KR"?>
<?xml-stylesheet type="text/xsl" href="index.xsl"?>
<전체>
<지역>서울특별시</지역>
<지역>경기도</지역>
<지역>강원도</지역>
<지역>충청도</지역>
<지역>전라도</지역>
<지역>경상도</지역>
<지역>제주도</지역>
<지역>인천광역시</지역>
<지역>대전광역시</지역>
<지역>대구광역시</지역>
<지역>울산광역시</지역>
<지역>부산광역시</지역>
<지역>광주광역시</지역>
    <고객>
        <번호>1</번호>
        <성명>오은미</성명>
        <주소 특별시·광역시·도="서울특별시">관악구 봉천동</주소>
        <전화>02-xxx-xxxx</전화>
    </고객>
    <고객>
        <번호>2</번호>
        <성명>김은희</성명>
        <주소 특별시·광역시·도="전라도">김제시 신풍동</주소>
       <전화>063-xxx-xxxx</전화>
    </고객>
    <고객>
        <번호>3</번호>
        <성명>허재원</성명>
        <주소 특별시·광역시·도="경기도">수원시 팔달구 영동</주소>
        <전화>031-xxxx-xxxx</전화>
    </고객>
    <고객>
        <번호>4</번호>
        <성명>이준희</성명>
        <주소 특별시·광역시·도="충청도">충주시 용산동</주소>
        <전화>041-xx-xxxx</전화>
    </고객>
    <고객>
        <번호>5</번호>
        <성명>정수미</성명>
        <주소 특별시·광역시·도="경기도">광명시 하안동</주소>
        <전화>02-xxx-xxxx</전화>
    </고객>
    <고객>
        <번호>6</번호>
        <성명>나지영</성명>
        <주소 특별시·광역시·도="서울특별시">강남구 삼성동</주소>
        <전화>02-xxx-xxxx</전화>
    </고객>
    <고객>
        <번호>7</번호>
        <성명>정진희</성명>
        <주소 특별시·광역시·도="경상도">통영시 도남동</주소>
        <전화>051-xxx-xxxx</전화>
    </고객>
    <고객>
        <번호>8</번호>
        <성명>김해영</성명>
        <주소 특별시·광역시·도="경기도">화성군 매향리</주소>
        <전화>031-xxx-xxxx</전화>
    </고객>
    <고객>
        <번호>9</번호>
        <성명>이명진</성명>
        <주소 특별시·광역시·도="전라도">군산시 문화동</주소>
        <전화>063-xxx-xxxx</전화>
    </고객>
</전체>



xsl 파일


<?xml version="1.0" encoding="EUC-KR"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<script>
<xsl:comment>
<![CDATA[
function go(){
while(testtable.rows.length>0){
testtable.deleteRow(0)
}

var temprow,tempcel,selectaddress,temptable=testtable
for(var i=0;i<testselect.length;i++){
if(testselect.options[i].selected==true){
selectaddress=testselect.options[i].text
}
}

var dom,namenode,addressnode,patternstring
dom=new ActiveXObject("MSXML.DOMDocument")
dom.async=false
dom.load("index.xml")
patternstring="전체/고객[주소/@특별시·광역시·도='"+selectaddress+"']"
customernode=dom.selectNodes(patternstring)
addressarray=new makearray(customernode.length)
numberarray=new makearray(customernode.length)
namearray=new makearray(customernode.length)
phonearray=new makearray(customernode.length)
for(var i=0;i<customernode.length;i++){
addressarray[i]=selectaddress+" "+customernode(i).childNodes(2).text
numberarray[i]=customernode(i).childNodes(0).text
namearray[i]=customernode(i).childNodes(1).text
phonearray[i]=customernode(i).childNodes(3).text
}
temprow=temptable.insertRow(temptable.rows.length)
tempcel=temprow.insertCell()
tempcel.innerHTML="주소"
tempcel=temprow.insertCell()
tempcel.innerHTML="번호"
tempcel=temprow.insertCell()
tempcel.innerHTML="이름"
tempcel=temprow.insertCell()
tempcel.innerHTML="전화번호"
for(i=0;i<customernode.length;i++){
temprow=temptable.insertRow(temptable.rows.length)
tempcel=temprow.insertCell()
tempcel.innerHTML=addressarray[i]
tempcel=temprow.insertCell()
tempcel.innerHTML=numberarray[i]
tempcel=temprow.insertCell()
tempcel.innerHTML=namearray[i]
tempcel=temprow.insertCell()
tempcel.innerHTML=phonearray[i]
}
}

function makearray(n){
this.length=n
for(var i=1;i<=n;i++){
this[i]=0
}
return this
}
]]>
</xsl:comment>
</script>
<table id="testtable" cellspacing="3" border="1">
</table>
<select id="testselect" onchange="go()">
<xsl:for-each select="전체/지역">
<option><xsl:value-of select="."/></option>
</xsl:for-each>
</select>
</html>
</xsl:template>
</xsl:stylesheet>

&lt;를 <로 바꿔야 한다.