DANCE WITH JAVA

開發(fā)出高質(zhì)量的系統(tǒng)

導(dǎo)航

<

2007年9月

>

日

一

二

三

四

五

六

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

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

隨筆分類(277)

隨筆檔案(238)

閱讀排行榜

常用鏈接

統(tǒng)計

隨筆 - 239
文章 - 0
評論 - 664
引用 - 0

積分與排名

積分 - 984056
排名 - 34

好友之家

js中實現(xiàn)table的插入、修改、刪除

進來工作慢慢遠離web、遠離js，看著自己這些年來學(xué)習(xí)過程中寫過的上百個的js demo，感覺還是把它們發(fā)上來吧。雖然它們不夠完善，但對于js初學(xué)者還是比較有用的。整理一下慢慢發(fā)上來，算是留念吧。

好了，第一從table開始吧
就是上邊是一個表，下邊是一些錄入控件text ,select
實現(xiàn)了：插入，刪除，修改，讀取，驗證類型唯一性(每種類型只能輸入一個記錄)
文中的內(nèi)容直接存成html就能看到效果，所以我就不貼圖片了。

<!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("這個類型的記錄已經(jīng)存在");

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-09-10 15:24 dreamstone 閱讀(10323) 評論(4) 編輯收藏所屬分類: 片段、腳本語言javascript


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




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: html in mms or fetch remote media in mms(彩信中能否自動訪問遠程資源) javascript 關(guān)聯(lián)列表的實現(xiàn)(簡單的和復(fù)雜的) javascript 動態(tài)添加刪除控件最簡單的ajax實現(xiàn) javascript兩種漸變效果進度條的實現(xiàn) vb script實現(xiàn)殺掉進程 javascript 禁止輸入、禁止粘帖、禁止拖放、禁止輸入法 javascript 格式化數(shù)字用vbscript來重寫javascript js轉(zhuǎn)換中把10進制數(shù)字轉(zhuǎn)換成16進制

# re: js中實現(xiàn)table的插入、修改、刪除 2008-10-25 00:39 vvd

# re: js中實現(xiàn)table的插入、修改、刪除 2010-08-10 10:44 ss

# re: js中實現(xiàn)table的插入、修改、刪除 2011-09-07 18:30 http://www.aygfsteel.com/Modules/CaptchaImage/JpegI

# re: js中實現(xiàn)table的插入、修改、刪除 2011-09-07 18:30 http://www.aygfsteel.com/Modules/CaptchaImage/JpegI

DANCE WITH JAVA

導(dǎo)航

隨筆分類(277)

隨筆檔案(238)

閱讀排行榜

常用鏈接

統(tǒng)計

積分與排名

好友之家

最新評論

js中實現(xiàn)table的插入、修改、刪除

評論