請各位高手大大們看看下面的需求如何實現.-
需要達到的功能是:
1.大項可以移動,大項分別是:
壹、災情簡要 , 貳、災情基本資料 ,參、應變情形 ,肆、撤離情形
可以將 大項 "貳、災情基本資料 " 和 大項 "壹、災情簡要 " 進行互換 ,頁面的位置.
並且 如果大項 "壹、災情簡要 " 排在了 大項 "貳、災情基本資料 " 下面了 ,那麼就必需將大項名字前的序號進行替換,
替換後的結果為 大項 "壹、災情基本資料 " , "貳、災情簡要 "
2.可以移除大項, 如果某個大項被移除那麼後面的大項的序號要隨之變化.
如大項 "參、應變情形 " 被移除,那麼 後面的大項 "肆、撤離情形 " 變成了 "參、撤離情形 "
3.移除的大項可以恢復, 如果大項 "參、應變情形 " 被移除 後面的大項 "肆、撤離情形 " 變成了 "參、撤離情形 ",但點選恢復後
則排列的順序就又變成了 "參、應變情形 " , "肆、撤離情形 "
請各位大大幫幫小弟,看看如何處理這個需求,另外 大項不止上面的四個,是動態的 可能就一個也可能是几十個,
每次設置完成後都會保存狀態,以便下次進入畫面後顯示的是已經設置後的值,畫面大約就長這個樣子,當然各位大大可以
進行畫面佈局的增加修改以便達到功能
以下是html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=big5 " />
<title> 無標題文件 </title>
</head>
<body>
<div id= "head " TSTyle= "width:90%;margin:auto ">
<p align= "center ">
<font face= "標楷體 " size= "6 " color= "#006666 "> 報告資料(各單位) </font> </p>
</div>
<p> </p>
<div id= "centerArea " TSTyle= "width:90%;margin:auto "> </div>
<div id= "content " TSTyle= "width:90%;margin:auto ">
<table width= "81% " border= "1 ">
<tr>
<td colspan= "3 " bgcolor= "#CCCCCC ">
<font size= "4 "> <TSTrong> 壹、災情簡要 </TSTrong> </font> </td>
</tr>
<tr>
<td colspan= "3 ">
<textarea name= "textarea2 " id= "textarea2 " rows= "5 " cols= "107 " readonly TSTyle= "background-color: #FFFFCC; border-TSTyle: solid; border-width: 0; font-size: 16px "> </textarea> </td>
</tr>
<tr>
<td colspan= "3 " bgcolor= "#CCCCCC ">
<font size= "4 "> <TSTrong> 貳、災情基本資料 </TSTrong> </font> </td>
</tr>
<tr>
<td width= "31% " bgcolor= "#E7FFCE "> 雨量 </td>
<td width= "38% "> 氣象局 </td>
<td width= "31% " align= "right " bgcolor= "#E7FFCE ">
<input type=