2008. 12. 22. 20:31
createElement로 select 생성후 onChange이벤트 주기
2008. 12. 22. 20:31 in 프로그래밍/javascript
오늘 하루종일 이것과 씨름을 하다가 결국에는 내가 항복하고 다른 방법을 통해서 해결했는데..
phpschool에 질문해서 결과를 얻어오긴 했음.
지금 당장은 안쓰이겠지만.. 언젠간 사용할 일이 있을꺼 같아서 올려둠!!
함수 호출할때마다 ()있는 거랑 없는 거랑 차이가 있으므로 주의!!
<script language="javascript" type="text/javascript">
var num = 1;
function add_Field() {
var table = document.getElementById('test').getElementsByTagName("TBODY")[0];
var newRow = document.createElement('tr');
table.appendChild(newRow);
var newCell = document.createElement('td');
newCell.className = "td_1";
newRow.appendChild(newCell);
var txt = num+"순위";
var newText = document.createTextNode(txt);
newCell.appendChild(newText);
var newCell_2 = document.createElement('td');
newCell_2.className = "td_1";
newRow.appendChild(newCell_2);
var newSelect = document.createElement('select');
newSelect.id = "seInterest_"+num+"_1";
newSelect.name = "seInterest_"+num+"_1";
newSelect.onChnage = alert('test');
newCell_2.appendChild(newSelect);
var newOption = document.createElement('option');
newOption.value = "";
newSelect.appendChild(newOption);
var newOptionText = "선택하세요";
newOption.appendChild(document.createTextNode(newOptionText));
for(var i=0; i<5; i++)
{
var newOption = document.createElement('option');
newOption.value = i;
newSelect.appendChild(newOption);
var newOptionText = i;
newOption.appendChild(document.createTextNode(newOptionText));
}
num++;
}
</script>
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" id="test">
<thead>
<tr>
<th> 번호 </th>
<th> 대분류 </th>
<th> 중분류 </th>
<th> 소분류 </th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="button" value="필드추가" onClick="add_Field()" />
</td>
</tr>
</tfoot>
</table>
</body>
</body>
</html>
---------------------------------------------------- 지기지님 답변
newSelect.onChnage = alert('test');
alert 자체를 붙이셨네요.
newSelect.onchange = function() { alert('test'); };
이렇게 하셔야 합니다.
이벤트명에는 대문자쓰지마세요. 호환문제가 발생합니다.
행여 다른 함수가 있다면 함수자체를 연결해야 합니다.
newSelect.onchange = onSelectFunction;
함수명을 줄때 () 붙여서 주게되면 함수 실행결과가 붙습니다.
객체자체를 붙여야합니다.
phpschool에 질문해서 결과를 얻어오긴 했음.
지금 당장은 안쓰이겠지만.. 언젠간 사용할 일이 있을꺼 같아서 올려둠!!
함수 호출할때마다 ()있는 거랑 없는 거랑 차이가 있으므로 주의!!
<script language="javascript" type="text/javascript">
var num = 1;
function add_Field() {
var table = document.getElementById('test').getElementsByTagName("TBODY")[0];
var newRow = document.createElement('tr');
table.appendChild(newRow);
var newCell = document.createElement('td');
newCell.className = "td_1";
newRow.appendChild(newCell);
var txt = num+"순위";
var newText = document.createTextNode(txt);
newCell.appendChild(newText);
var newCell_2 = document.createElement('td');
newCell_2.className = "td_1";
newRow.appendChild(newCell_2);
var newSelect = document.createElement('select');
newSelect.id = "seInterest_"+num+"_1";
newSelect.name = "seInterest_"+num+"_1";
newSelect.onChnage = alert('test');
newCell_2.appendChild(newSelect);
var newOption = document.createElement('option');
newOption.value = "";
newSelect.appendChild(newOption);
var newOptionText = "선택하세요";
newOption.appendChild(document.createTextNode(newOptionText));
for(var i=0; i<5; i++)
{
var newOption = document.createElement('option');
newOption.value = i;
newSelect.appendChild(newOption);
var newOptionText = i;
newOption.appendChild(document.createTextNode(newOptionText));
}
num++;
}
</script>
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" id="test">
<thead>
<tr>
<th> 번호 </th>
<th> 대분류 </th>
<th> 중분류 </th>
<th> 소분류 </th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="button" value="필드추가" onClick="add_Field()" />
</td>
</tr>
</tfoot>
</table>
</body>
</body>
</html>
---------------------------------------------------- 지기지님 답변
newSelect.onChnage = alert('test');
alert 자체를 붙이셨네요.
newSelect.onchange = function() { alert('test'); };
이렇게 하셔야 합니다.
이벤트명에는 대문자쓰지마세요. 호환문제가 발생합니다.
행여 다른 함수가 있다면 함수자체를 연결해야 합니다.
newSelect.onchange = onSelectFunction;
함수명을 줄때 () 붙여서 주게되면 함수 실행결과가 붙습니다.
객체자체를 붙여야합니다.
'프로그래밍 > javascript' 카테고리의 다른 글
| javascript pause (0) | 2009.01.09 |
|---|---|
| 기본에 충실하자 (Cookie) (0) | 2008.12.22 |
| 자바스크립트 Explorer debugger (0) | 2008.12.22 |
| prototype.js (0) | 2008.12.09 |
| [javascript : merge] (0) | 2008.12.09 |
