收集:
<HTML>
<SCRIPT LANGUAGE="javascript">
var count = 0; //count the number of rows
function tb_addnew() //添加行
{
var ls_t=document.all("mytable")
maxcell=ls_t.rows(0).cells.length; //取得表寬
mynewrow = ls_t.insertRow(); //插入新行
??? for(i=0;i<maxcell;i++)
??? {
??? mynewcell=mynewrow.insertCell(); //在新行中順序插入表格單元
??? mynewcell.innerHTML = "<input name='row"+count+"' value = 'row"+count+"'>"http://在表格單元中添加文本輸入框
?//值存在一個隱藏表單域中,以便提交時使用,使用數組方法接收值
??? }
?count++;
}
function tb_delete() //刪除行
{
var ls_t=document.all("mytable");
if(count >? 0)
?{
?ls_t.deleteRow() ; //刪除最末一行
?count--;
?}
}
</SCRIPT>
<BODY>
<TABLE id=mytable border=1>
?<TR><TH>第一列</TH><TH>第二列</TH><TH>第三列</TH><TH>第四列</TH></TR>
</TABLE>
?<input type=button value="新增" onclick="tb_addnew()">
?<input type=button value="刪除" onclick="tb_delete()" >
</BODY>
</HTML>
?
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()">