javascript
[导入]javascript总结
1.動態添加一行，和刪除當前行
<script>?
var count=0;
?function ff()
?{
?var txt1=document.getElementById("Text1");
?var table1=document.getElementById("table1");
?rowNo=table1.rows.length;
?Tr=table1.insertRow(rowNo);
?Tr.id="tr"+count;
?Td=Tr.insertCell(0);
?Td.id="td"+count;
?Td.innerText=txt1.value;
?Td2=Tr.insertCell(1);
?Td2.innerHTML+='<input οnclick="del(this)" type="button" value="刪除"/>'
?count +=1;
?
?}
?function del(btn)
?{
?var tr=btn.parentNode.parentNode;
?var tb=tr.parentNode;
?tb.removeChild(tr);
?}
?
??</script>
?</HEAD>
?<body MS_POSITIONING="GridLayout">
??<form id="Form1" method="post" runat="server">
???<input id="Text1" runat="server" type="text" NAME="Text1">
???<table id="table1" border="1" bordercolor="red">
???</table>
???<input id="Button1" type="button" οnclick="ff()">
??</form>
?</body>
</HTML>
2。表格斜線
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
?<script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<body leftmargin=20 topmargin=20>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400>
<TR bgcolor="FFFFFF">
??? <TD id="td1"> </TD>
??? <TD>張三</TD>
??? <TD>李四</TD>
??? <TD>王五</TD>
</TR>
<TR bgcolor="FFFFFF">
??? <TD>數學</TD>
??? <TD>55</TD>
??? <TD>66</TD>
??? <TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
??? <TD>英語</TD>
??? <TD>99</TD>
??? <TD>68</TD>
??? <TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
??? <TD>語文</TD>
??? <TD>33</TD>
??? <TD>44</TD>
??? <TD>55</TD>
</TR>
</TABLE>
<script>
function line(x1,y1,x2,y2,color)
{
??? var tmp
??? if(x1>=x2)
??? {
??????? tmp=x1;
??????? x1=x2;
??????? x2=tmp;
??????? tmp=y1;
??????? y1=y2;
??????? y2=tmp;
??? }
??? for(var i=x1;i<=x2;i++)
??? {
??????? x = i;
??????? y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
??????? a(x,y,color);
??? }
}
//line(1,1,100,100,"000000");
line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000')
</script>
</BODY>
</HTML>
3。可拖動的Table
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null;??????? //當前拖動對象
var relLeft;??????? //鼠標按下位置相對對象位置
var relTop;
var zindex=-1;//控制被拖動對象的z-index值
function f_mdown(obj)
{
??????? currentMoveObj = obj;??????????????? //當對象被按下時，記錄該對象
??????? currentMoveObj.style.position = "absolute";
??????? relLeft = event.x - currentMoveObj.style.pixelLeft;
??????? relTop = event.y - currentMoveObj.style.pixelTop;
??????? zindex=currentMoveObj.style.zIndex;//記錄原z-index值
??????? currentMoveObj.style.zIndex=10000;
}
window.document.onmouseup = function()
{????? currentMoveObj.style.zIndex=zindex;//恢復
??????? zindex=-1;
??????? currentMoveObj = null;??????? //當鼠標釋放時同時釋放拖動對象
?????? }
function f_move(obj)
{
??????? if(currentMoveObj != null)
??????? {
??????????????? currentMoveObj.style.pixelLeft=event.x-relLeft;
??????????????? currentMoveObj.style.pixelTop=event.y-relTop;
??????? }
}
//-->
</SCRIPT>
<BODY>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
??????? <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
??????? <TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
??????? <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
??????? <TD align="center" height="60">content</TD>
</TR>
</TABLE>
</BODY>
2.解析XML 成Table
<XML ID="oXmlData">
<tab>
<row>
<col name="Col1"/>
<col name="Col2"/>
<col name="Col3"/>
</row>
<row>
<col name="Col4"/>
<col name="Col5"/>
<col name="Col6"/>
</row>
<row>
<col name="Col7"/>
<col name="Col8"/>
<col name="Col9"/>
</row>
</tab>
</XML>
<input type="button" value="生成XML表格" onClick="createXmlTable()">
<div id="oDiv_createXmlTable"></div>
<script language="JavaScript">
function createXmlTable(){
var HTML='';
var row=oXmlData.XMLDocument.getElementsByTagName('row');
var col=oXmlData.XMLDocument.getElementsByTagName('col');
HTML+='<table border><tr>';
for(i=1;i<col.length+1;i++){
HTML+='<td>'+col[i-1].getAttribute('name')+'</td>';
if(i%row.length==0 && i!=col.length) HTML+='</tr><tr>';
}
HTML+='</tr></table>';
oDiv_createXmlTable.innerHTML=HTML;
}
</script>
4.可拖動的列
<style>
.tdLine {
?float:right;
?width:6px;
?cursor:w-resize;
?height:100%;
?background:red;
}
</style>
<body>
<table border="1">
<tr>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
function run(obj){
?var _sx = event.x;
?document.onmouseup = function(){
??this.onmousemove = null;
?}
?document.onmousemove = function(){
??var _xx = event.x - _sx;;
??obj.parentNode.width = obj.parentNode.width * 1 + _xx;
??_sx = event.x;
??window.status = "x = " + _sx;
?}
}
</script>
6。javascript setTimeout 和 setInterval的區別
setTimeout (表達式,延時時間)
setInterval(表達式,交互時間)
延時時間/交互時間是以豪秒為單位的(1000ms=1s)
setTimeout? 在執行時,是在載入后延遲指定時間后,去執行一次表達式,僅執行一次
setInterval 在執行時,它從載入后,每隔指定的時間就執行一次表達式
set Timeout 也可以實現象setInterval一樣的功能
set Timeout:
<script language="javascript">
var i;
i=0;
function reloop()
{
i=i+1;
alert(String(i));
setTimeout("reloop()",1000);
}
reloop();
</script>
setInterval:
<script language="javascript">
var i;
i=0;
function reloop()
{
i=i+1;
alert(String(i));
}
setInterval("reloop()",1000);
</script>
7.取得鼠標所在位置的對象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 取得鼠標所在位置的對象 </TITLE>
<META NAME="Author" CONTENT="寶玉 [url]http://www.nwpubbs.net[/url]">
</HEAD>
<script language="javascript">
??? <!--
?function fnGetTable( oEl )
??? {
??try{
???while( null != oEl && oEl.tagName!="TABLE" )
???{
????oEl = oEl.parentElement;
???}
???return oEl;
??}
??catch(e)
??{
???return null;
??}
??? }
?function pos()
?{
??try{
??oElement = document.elementFromPoint(event.x,event.y);
??oElement = fnGetTable(oElement);
??if(oElement.tagName=="TABLE")
???show.innerText=oElement.id;
??}
??catch(e)
??{}
??? }
?// -->
</script>
<BODY οnmοusemοve="pos()">
<table border="1" cellpadding="" cellspacing="" width="" id="table1">
<tr>
?<td>table1</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table2">
<tr>
?<td>table2</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table3">
<tr>
?<td>table3</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table4">
<tr>
?<td>table4</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table5">
<tr>
?<td>table5</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table6">
<tr>
?<td>table6</td>
</tr>
</table><br /><br />
鼠標當前在：<span id="show"></span>
</BODY>
</HTML>
9。精典的拖動效果
<html>
<head>
<title>_xWin</title>
<script language=JScript>
<!--
//可以打包為js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
var xx;
//開始拖動;
function startDrag(obj)
{
??????? if(event.button==1)
??????? {
??????????????? //鎖定標題欄;
??????????????? obj.setCapture();
??????????????? //定義對象;
??????????????? var win = obj.parentNode;
??????????????? var sha = win.nextSibling;
??????????????? //記錄鼠標和層位置;
??????????????? x0 = event.clientX;
??????????????? y0 = event.clientY;
??????????????? x1 = parseInt(win.style.left);
??????????????? y1 = parseInt(win.style.top);
??????????????? //記錄顏色;
??????????????? normal = obj.style.backgroundColor;
??????????????? //改變風格;
??????????????? obj.style.backgroundColor = hover;
??????????????? win.style.borderColor = hover;
??????????????? obj.nextSibling.style.color = hover;
??????????????? sha.style.left = x1 + offx;
??????????????? sha.style.top? = y1 + offy;
??????????????? moveable = true;
??????? }
}
//拖動;
function drag(obj)
{
??????? if(moveable)
??????? {
??????????????? var win = obj.parentNode;
??????????????? var sha = win.nextSibling;
??????????????? win.style.left = x1 + event.clientX - x0;
??????????????????????????????? sha.style.left = parseInt(win.style.left) + offx;
??????????????????????????????? if ((y1 + event.clientY - y0)>0 && (y1 + event.clientY - y0)<600){
??????????????? win.style.top? = y1 + event.clientY - y0;
??????????????? sha.style.top? = parseInt(win.style.top) + offy;
??????????????? }
??????? }
}
//停止拖動;
function stopDrag(obj)
{
??????? if(moveable)
??????? {
??????????????? var win = obj.parentNode;
??????????????? var sha = win.nextSibling;
??????????????? var msg = obj.nextSibling;
??????????????? win.style.borderColor???? = normal;
??????????????? obj.style.backgroundColor = normal;
??????????????? msg.style.color?????????? = normal;
??????????????? sha.style.left = obj.parentNode.style.left;
??????????????? sha.style.top? = obj.parentNode.style.top;
??????????????? obj.releaseCapture();
??????????????? moveable = false;
??????? }
}
//獲得焦點;
function getFocus(obj)
{
??????? if(obj.style.zIndex!=index)
??????? {
??????????????? index = index + 2;
??????????????? var idx = index;
??????????????? obj.style.zIndex=idx;
??????????????? obj.nextSibling.style.zIndex=idx-1;
??????? }
}
//最小化;
function min(obj)
{
??????? var win = obj.parentNode.parentNode;
??????? var sha = win.nextSibling;
??????? var tit = obj.parentNode;
??????? var msg = tit.nextSibling;
??????? var flg = msg.style.display=="none";
??????? if(flg)
??????? {
??????????????? win.style.height? = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
??????????????? sha.style.height? = win.style.height;
??????????????? msg.style.display = "block";
??????????????? obj.innerHTML = "0";
??????? }
??????? else
??????? {
??????????????? win.style.height? = parseInt(tit.style.height) + 2*2;
??????????????? sha.style.height? = win.style.height;
??????????????? obj.innerHTML = "2";
??????????????? msg.style.display = "none";
??????? }
}
//關閉;
function cls(obj)
{
??????? var win = obj.parentNode.parentNode.parentNode;
??????? //var sha = win.nextSibling;
??????? win.style.visibility = "hidden";
??????? //sha.style.visibility = "hidden";
}
//顯示/隱藏;
function ShowHide()
{
??????? if (xx!=null)
??????????????????????? if (xx.style.visibility == "hidden")
??????????????????????????????? xx.style.visibility = "visible";
??????????????????????? else if (xx.style.visibility == "visible")
??????????????????????????????? xx.style.visibility = "hidden";
}
//創建一個對象;
function xWin(id,w,h,l,t,tit,msg)
{
??????? index = index+2;
??????? this.id????? = id;
??????? this.width?? = w;
??????? this.height? = h;
??????? this.left??? = l;
??????? this.top???? = t;
??????? this.zIndex? = index;
??????? this.title?? = tit;
??????? this.message = msg;
??????? this.obj???? = null;
??????? this.bulid?? = bulid;
??????? this.bulid();
??????? xx = document.getElementById('allx');
??????? xx.style.visibility = "visible";
}
//初始化;
function bulid()
{
??????? var str = ""
??????????????? + "<div id='allx'><div id='xMsg'" + this.id + " "
??????????????? + "style='"
??????????????? + "z-index:" + this.zIndex + ";"
??????????????? + "width:" + this.width + ";"
??????????????? + "height:" + this.height + ";"
??????????????? + "left:" + this.left + ";"
??????????????? + "top:" + this.top + ";"
??????????????? + "background-color:" + normal + ";"
??????????????? + "color:" + normal + ";"
??????????????? + "font-size:11px;"
??????????????? + "font-family:Verdana;"
??????????????? + "position:absolute;"
??????????????? + "cursor:default;"
??????????????? + "border:2px solid " + normal + ";"
??????????????? + "' "
??????????????? + "οnmοusedοwn='getFocus(this)'>"
??????????????????????? + "<div "
??????????????????????? + "style='"
??????????????????????? + "background-color:" + normal + ";"
??????????????????????? + "width:" + (this.width-2*2) + ";"
??????????????????????? + "height:20;"
??????????????????????? + "color:white;"
??????????????????????? + "' "
??????????????????????? + "οnmοusedοwn='startDrag(this)' "
??????????????????????? + "οnmοuseup='stopDrag(this)' "
??????????????????????? + "οnmοusemοve='drag(this)' "
??????????????????????? + "οndblclick='min(this.childNodes[1])'"
??????????????????????? + ">"
??????????????????????????????? + "<span style='width:" + (this.width-2*14-4) + ";padding-left:3px;'>" + this.title + "</span>"
??????????????????????????????? + "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='min(this)'>0</span>"
??????????????????????????????? + "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='cls(this)'>r</span>"
??????????????????????? + "</div>"
??????????????????????????????? + "<div style='"
??????????????????????????????? + "width:100%;"
??????????????????????????????? + "height:" + (this.height-20-4) + ";"
??????????????????????????????? + "background-color:white;"
??????????????????????????????? + "line-height:14px;"
??????????????????????????????? + "word-break:break-all;"
??????????????????????????????? + "padding:3px;"
??????????????????????????????? + "'>" + this.message + "</div>"
??????????????? + "</div>"
??????????????? + "<div id='xshadow' style='"
??????????????? + "width:" + this.width + ";"
??????????????? + "height:" + this.height + ";"
??????????????? + "top:" + this.top + ";"
??????????????? + "left:" + this.left + ";"
??????????????? + "z-index:" + (this.zIndex-1) + ";"
??????????????? + "position:absolute;"
??????????????? + "background-color:black;"
??????????????? + "filter:alpha(opacity=40);"
??????????????? + "'>by wildwind</div></div>";
??????? document.getElementById('msgbox').innerHTML = str;
???????????????
???????????????
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
??????? var a = new xWin("1",460,400,200,200,"是要這個效果嗎？","<br>這里有幾點需要注意的地方：<br><br>1、xx這個變量是你自己添加的吧？想法是對的，但是放錯了地方，你只在cls()這個方法里面給xx賦值，這就造成了這個對象在窗口第一次出現時由于沒有被賦值(關閉按鈕還沒有被點擊)，導致無法獲取，所以應該把對xx賦值這個工作放在窗口第一次初始化完成的地方，也就是xWin函數中，this.build語句之后。當然也可能你已經試過放在這里，但是發現根本不起作用，這就涉及到下一個要注意的問題了。<br><br>2、Build函數的最后，你是通過insertAdjacentHTML()方法把生成的代碼放在了網頁全部html標簽之后，因此生成的代碼中的對象在頁面中使用getElementById()方法根本訪問不到，所以才會不起作用，怎么改呢？方法很多，我是這樣處理的，在頁面body的關閉標簽之前插入一個div，然后用innerHTML()方法寫入。<br><br>3、對于代碼，我進行了一點修正，因為發現你的cls()方法當中把xWin和他的陰影一并隱藏了，但是在ShowHide()方法中卻只把xWin顯示出來，這就導致關閉(實質上是hidden)后再打開的窗體已經沒有了陰影，當然這也不算什么大問題，我在xWin和他的陰影外面套了一個allx的div，再把這個對象賦給xx，然后就可以一并隱藏一并顯示了，更方便一些。<br><br>4、主要就是這幾個地方，這個效果還是很不錯的，不過程序結構還可以再優化一些，代碼比較多，我也沒有細看，稍微改了一下，可能不是最好的方法。大家繼續提建議啊。希望對樓主能有幫助。");
}
window.onload = initialize;
//-->
</script>
</head>
<body onselectstart='return false' οncοntextmenu='return false' scroll='no'>
<DIV class=textSheet
style="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid">
<table width="242" height="160" border="1" ID="Table2">
??? <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080"? onMouseMove="bgColor='#ffff99'" οnmοuseοut="bgColor='#FFFFFF'" οnclick="ShowHide()">顯示隱藏</td>
</table>
</DIV>
<div id="msgbox"></div>
</body>
</html>
suiqirui 2007-06-03 22:17 發表評論
文章來源:http://www.cnblogs.com/suiqirui19872005/archive/2007/06/03/769663.html
轉載于:https://www.cnblogs.com/QiRuiNet-helloworld/archive/2007/06/17/786340.html
總結
以上是生活随笔為你收集整理的[导入]javascript总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 树形数据查询示例
- 下一篇： [转]javascript小技巧,超强推