執著的笨蛋
黑暗的SH！灰暗的人生！

隨筆 - 154 文章 - 60 trackbacks - 0

<

2007年11月

>

日

一

二

三

四

五

六

28

29

30

31

1

2

3

4

5

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

聲明：

該blog是為了收集資料，認識朋友，學習、提高技術，所以本blog的內容除非聲明，否則一律為轉載！！

感謝那些公開自己技術成果的高人們！！！

支持開源，尊重他人的勞動！！

常用鏈接

留言簿(3)

隨筆分類(148)

隨筆檔案(143)

收藏夾(2)

ppp(2)

其他

學習（技術）

ander小明的blog
ander小明的blog
anotherbug的blog（北京）
DANCE WITH JAVA
MySQL 中文網
solol.org
任再旺(山東)
另一個
城市胡同
戴一波 CNBRUCE'S BLOG(布魯斯狼)
林信良(良葛格)
金色陽光
關注Eclipse,Ajax,Struts,Hibernate,Spring,Java,jsp,web service,計算機安全等信息。

觀察思考（非技術）

冉云飛
新語絲網站
新語絲論壇
羅永浩---傻逼老憤青
個人網站
羅永浩--牛博
牛博國際

搜索

閱讀排行榜

評論排行榜

js table 操作-----實現table的插入、修改、刪除

上邊是一個表，下邊是一些錄入控件text ,select
實現了：插入，刪除，修改，讀取，驗證類型唯一性(每種類型只能輸入一個記錄)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

var flg=false;

var selectedColor = "#99CCCC";

var initColor = "#ffff99";

var selectedRowIndex = "";

var editObj;

function add(){

var cell;

var textNode;

// add head

var type = document.getElementsByName("type")[0];

head = type.options[type.selectedIndex].text;

//check exist

var hiddenHeads = document.getElementsByName("hiddenHead");

for(i=0;i<hiddenHeads.length;i++){

if(hiddenHeads[i].value == type.value){

alert("這個類型的記錄已經存在");

return ;

}

//add row

tbl = document.getElementById("paramTbl");

rowsLen = tbl.rows.length;

row = tbl.insertRow(rowsLen);

//create head tag

textNode = document.createTextNode(head);

cell = row.insertCell(0)

cell.setAttribute("hight","22");

cell.appendChild(textNode);

row.appendChild(cell);

//add param tag

for(i=1;i<4;i++){

paramValue = document.getElementsByName("param"+i)[0].value;

textNode = document.createTextNode(paramValue);

cell = row.insertCell(i)

cell.setAttribute("hight","22");

cell.appendChild(textNode);

row.appendChild(cell);

}

//add head value

hiddenHead = document.createElement("<input type='hidden' name='hiddenHead' value='"+type.value+"'/>");

cell = row.insertCell(4)

cell.setAttribute("hight","22");

cell.appendChild(hiddenHead);

row.appendChild(cell);

//add param value

for(i=5;i<8;i++){

paramValue = document.getElementsByName("param"+(i-4))[0].value;

hidden = document.createElement("<input type='hidden' name='hiddenParam"+(i-4)+"' value='"+paramValue+"'/>");

cell = row.insertCell(i)

cell.style.display='none';

cell.appendChild(hidden);

row.appendChild(cell);

}

row.onclick=function(){rowClick(this);};

row.bgColor = initColor;

init();

}

function edit(){

tbl = document.getElementById("paramTbl");

if(selectedRowIndex==""){

alert("please select a row");

return ;

}

for(i=1;i<4;i++){

paramObj = document.getElementsByName("param"+i)[0];

hiddenObj = document.getElementsByName("hiddenParam"+i)[selectedRowIndex-1];

hiddenObj.value = paramObj.value;

editObj.cells[i].innerText=paramObj.value;

}

init();

}

function del(){

tbl = document.getElementById("paramTbl");

tbl.deleteRow(selectedRowIndex);

selectedRowIndex = "";

init();

}

function rowClick(obj){

tbl = document.getElementById("paramTbl");

if(selectedRowIndex != ""){

tbl.rows[selectedRowIndex].bgColor = initColor;

}

selectedRowIndex = obj.rowIndex;

obj.bgColor = selectedColor;

//reset select

var type = document.getElementsByName("type")[0];

var hiddenHead = document.getElementsByName("hiddenHead")[selectedRowIndex-1];

var opts = type.options;

if(flg){

alert(selectedRowIndex-1);

alert(hiddenHead);

alert(hiddenHead.value);

}

for(i=0;i<opts.length;i++){

if(opts[i].value == hiddenHead.value ){

opts[i].selected = true;

}

//copy param value

for(i=1;i<4;i++){

paramObj = document.getElementsByName("param"+i)[0];

hiddenObj = document.getElementsByName("hiddenParam"+i)[selectedRowIndex-1];

paramObj.value = hiddenObj.value;

//alert(hiddenObj.value);

}

editObj=obj;

}

function init(){

for(i=1;i<4;i++){

param = document.getElementsByName("param"+i)[0];

param.value="";

}

var type = document.getElementsByName("type")[0];

type.options[0].selected=true;

}

function test(){

hiddenObjs = document.getElementsByName("hiddenParam1")

for(i=0;i<hiddenObjs.length;i++){

alert(hiddenObjs[i].value);

}

var hiddenHeads = document.getElementsByName("hiddenHead");

for(i=0;i<hiddenHeads.length;i++){

alert(hiddenHeads[i].value);

}

function test2(){

if(flg){

flg=false;

}else{

flg=true;

}

function reset(){

tbl = document.getElementById("paramTbl");

if(selectedRowIndex!=""){

tbl.rows[selectedRowIndex].bgColor = initColor;

selectedRowIndex="";

}

for(i=1;i<4;i++){

param = document.getElementsByName("param"+i)[0];

param.value="";

}

</script>

<BODY>

<tr>

</tr>

</table>

</div>

<table>

<tr>

<td>

</select>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

</tr>

</table>

<!--

-->

</BODY>

</HTML>

posted on 2007-11-29 16:53 lk 閱讀(1094) 評論(0) 編輯收藏所屬分類: ajax&js

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: [JS]Cookie精通之路 [轉]40種網頁常用小技巧----Ajax中國如何使用Javascript格式化數字顯示 javascript函數（格式化數字，日期比較，光標處插入或修改文字，JS圖片動畫效果）讓你的網頁更精彩 - Javascript 調用MSAgent zoom.js 使用事例 [轉]js日期時間函數(經典＋完善＋實用) js獲取日期星期時間 JAVASCRIPT的常用技術 close window

常用鏈接

留言簿(3)

隨筆分類(148)

隨筆檔案(143)

收藏夾(2)

其他

學習（技術）

觀察思考（非技術）

搜索

最新評論

閱讀排行榜

評論排行榜