轉載于CSDN
在.net開發中,充分利用免費控件是好事情，但是如果不能修改控件達到自己的需求，就要動用JS大法了，前提是研究好瀏覽器模型 的各種對象的方法屬性。尤其是熟悉CSS+HTML就會做的很酷。就JS語言本身來說要求不高。
1，動態刪除Table 里面內容技巧，不需要寫太多代碼，一行：
tb.removeNode(true)
2,動態增加行,除了CreateElement方法，還可以這樣比較短小：
<table id=tb1></table>
<SCRIPT>
function addTable(){
? var row1 = tb1.insertRow();
? var cell1=row1.insertCell();
? var cell2=row1.insertCell();
? cell1.innerText="灰豆寶寶";
? cell2.innerText="超級大笨狼"
}
</SCRIPT>
<INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">
3，在DIV中動態增加Table
<SCRIPT>
function addTable(){
? var tb1 = document.createElement("table");
? tb1.border="1px";
? var row1 = tb1.insertRow();
? var cell1=row1.insertCell();
? var cell2=row1.insertCell();
? mydiv.appendChild(tb1);
? cell1.innerText="wanghr100";
? cell2.innerText="panyuguang962"
}
</SCRIPT>
<BODY>
<div id=mydiv style="width:400;height:300;"></div>
<INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">
4,在DIV中刪除Table，簡單只要Div.innerHTML=""就可以。
以上是部分實用相對短小的代碼，當然有其他各種辦法實現，不過一般都比上面的長，比如組合使用DIV對象的insertAdjacentHTML 方法等，在不同需要下使用不同方法，前提是研究好瀏覽器模型 的各種對象的方法屬性。尤其是熟悉CSS+HTML就會做的很酷。就JS語言本身來說要求不高。
以下是以Document對象為例，相關方法有：
Method Description
attachEvent
createAttribute ?
createComment ?
createDocumentFragment
createElement
createEventObject
createStyleSheet
createTextNode
detachEvent
getElementById ?
getElementsByName
getElementsByTagName
mergeAttributes
recalc
write ?
writeln
以DIV對象為例相關方法有：
addBehavior
appendChild
applyElement
attachEvent
clearAttributes
cloneNode
contains
detachEvent
getAdjacentText ?
getAttribute ?
getAttributeNode
getElementsByTagName
hasChildNodes
insertAdjacentElement
insertAdjacentHTML
insertAdjacentText
insertBefore
mergeAttributes
normalize
removeAttribute
removeAttributeNode ?
removeBehavior
removeChild
removeExpression
removeNode
replaceAdjacentText
replaceChild
replaceNode
setActive
setAttribute
setAttributeNode
setExpression ?
其他，比如下拉列表對象，和拖拽操作等我有時間也整理比較一下，實現相同功能，相對比較短的精彩代碼是值得收藏的。
1. removeNode(true) 非IE瀏覽器不支持的，應該用 obj.parentNode.removeChild(obj);
2. insertRow(x) insertCell(y) 這個參數是IE里是可以缺省，但是在非IE瀏覽器里不可缺省
<SCRIPT>
function addTable(){
? var tb1 = document.createElement("TABLE");
? tb1.border="1px";
? var row1 = tb1.insertRow(0);
? var cell1=row1.insertCell(0);
? var cell2=row1.insertCell(1);
? document.getElementById("mydiv").appendChild(tb1);
? cell1.innerHTML="wanghr100";
? cell2.innerHTML="panyuguang962";
? row1.insertCell(2).innerHTML="要注意：給的例子要考慮全面";
}
</SCRIPT>
<BODY>
<div id="mydiv" style="width:400;height:300;"></div>
<INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">
posted on 2006-11-24 19:10
larryjava 閱讀(391)
評論(0) 編輯 收藏