자바스크립트로 테이블의 행 위아래 순서이동
페이지 정보
작성자 서방님 댓글 0건 조회 118회 작성일 07-02-21 09:11본문
마땅한 제목을 쓰기가 애매해서요..
필요에 의해서 만들어는 봤는데 소스가 넘 길고 허접하지만..^^;
그래두 원하는 목적은 구현했다는..ㅋㅋ
** 다중셀렉트로 하면 되긴 하지만 디자인이 안이뻐서요..
** html로 예쁘게 꾸미면 이쁘지 않을까요?^^;;
- 참고로 제가 ie밖에 안써서요... 아마 다른 브라우져에선 안될듯 싶은데....
<script>
function change(t)
{
var list = document.form.list;
var key = document.form.listn;
ln = new Array();
list2 = list.value.split("(@)");
if(!key.value) return false;
// 위로
if(t=="up") {
for(i=0;i<list2.length;i++) {
// 선택된 키를 만나면
if(list2[i]==key.value&&i>0) {
ln[i] = list2[i-1];
ln[i-1] = list2[i];
}
else ln[i] = list2[i];
}
}
// 아래로
else if(t=="down") {
for(i=0;i<list2.length;i++) {
// 선택된 키를 만나면
if(list2[i]==key.value&&(i+1<list2.length)) {
ln[i] = list2[i+1];
ln[i+1] = list2[i];
i++;
}
else ln[i] = list2[i];
}
}
// 제일위로
else if(t=="top") {
ln[0] = key.value;
var ln_no = 1;
for(i=0;i<list2.length;i++) { if(list2[i]!=key.value) { ln[ln_no] = list2[i]; ln_no++; } }
}
// 제일아래로
else if(t=="bottom") {
var ln_no = 0;
for(i=0;i<list2.length;i++) {
// 선택된 키가 아닐 경우
if(list2[i]!=key.value) { ln[ln_no] = list2[i]; ln_no++; }
}
ln[list2.length-1] = key.value;
}
ln = ln.join("(@)");
list.value = ln;
get_result(key.value);
}
// 삭제
function row_del(no)
{
var list = document.form.list;
ln = new Array();
list2 = list.value.split("(@)");
// 삭제할 아이템
var del_key = document.all[no].innerHTML;
// 배열삭제
var ln_no = 0;
for(i=0;i<list2.length;i++) {
// 선택된 키가 아닐 경우
if(list2[i]!=del_key) { ln[ln_no] = list2[i]; ln_no++; }
}
ln = ln.join("(@)");
list.value = ln;
document.form.listn.value = "";
get_result(del_key);
}
function choice_item(no)
{
var skey = document.all[no].innerHTML;
document.form.listn.value = skey;
get_result(skey);
}
function get_result(skey)
{
var list = document.form.list;
var view_table;
view_table = "<table border=1>";
list2 = list.value.split("(@)");
for(i=0;i<list2.length;i++) {
if(list2[i]==skey) choice_bg = "#3399FF"; else choice_bg = "#CCFFFF";
if(list2[i]) {
if(list2[i]==skey) radio_value = "checked"; else radio_value = null;
view_table += "<tr bgcolor="+choice_bg+" id=list_row_"+i+">"
+ "<td onclick="choice_item('list_td_"+i+"')"><input type=radio name=item_list onclick="choice_item('list_td_"+i+"')" "+radio_value+"></td>"
+ "<td onclick="choice_item('list_td_"+i+"')" id=list_td_"+i+">"+list2[i]+"</td>"
+ "<td><span style='cursor:hand;' onclick="row_del('list_td_"+i+"');">삭제</span></td>"
+ "</tr>rn";
}
else view_table += "<tr bgcolor="+choice_bg+"><td>곡을 선택하여 주세요.</td></tr>rn";
}
view_table += "</table>";
document.all["view"].innerHTML = view_table;
}
</script>
<body onload="get_result()">
<form name="form">배열목록 :
<input name="list" size="100" type="text" value="나무(@)사랑(@)바람(@)별(@)꿈(@)하늘(@)호수(@)바다(@)강">
<br> 순서변경할 배열값 :
<input name="listn" size="20" type="text"> (테이블 선택해도 됨)
<input onclick="change('top')" type="button" value="맨위로">
<input onclick="change('up')" type="button" value="위로">
<input onclick="change('down')" type="button" value="아래로">
<input onclick="change('bottom')" type="button" value="맨아래로">
<br> <span id="view"></span>
</form>
출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=46515&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B4%D9%C1%DF%BC%BF%B7%BA%C6%AE&sop=and
첨부파일
- updown.html (3.4K) 0회 다운로드 | DATE : 2008-09-08 11:41:07
댓글목록
등록된 댓글이 없습니다.
