------- android培訓、java培訓、期待與您交流! --------
1、在頁面上通過按鈕創建一個表格
思路: 1、創建一個table節點。document.creatElement("table");
2、通過table節點的InserRow()方法創建表格的行爲對象並添加到Rows集合中。
3、通過行爲對象的insertcell()方法創建單元格對象並添加到cells集合中。
4 、給單元格中添加數據。
a、創建一個節點如文本節點,document.creatTextNode("文本內容");通過單元格對象appendChild方法將文本節點添加到單元格的尾部。
b、可以通過單元格的innerHTML,添加單元格的元素,tdNode.innerHTML="<img src='1.jpg' alt='圖片說明信息'/>";
5、建立好表格節點,添加到DOM樹中也就是頁面的指定位置。
2、如何刪除表格的行和列。
思路: 1、刪除行:獲取表格對象,通過表格對象的deleteRow方法,將指定的行索引傳入deleteRow方法中。
2、刪除列:表格沒有直接刪除列的方法,要通過刪除每一行中指定的單元格來完成刪除列的動作。獲取所有的行對象,並進行遍歷,通過行對象的deleteCell方法將指定的單元格刪出。
3、對錶格中的數據進行排序。
思路: 1、獲取表格中所有行對象。
2、定義臨時存儲將需要進行排序的行對象存入到數組中。
3、對數組進行排序,通過比較每一行對象中指定單元格中的數據,如果是整數需要通過ParseInt轉換。
4、將排序後的數組通過遍歷,將每一個行對象重新添回表格,通過tbody節點的appendChild方法
5、其實排序就是每一行對象的引用取出。
4、表格的行顏色間隔顯示,並在鼠標指定的行上高亮顯示
思路: 1、獲取所有的行對象,將需要間隔顏色顯示的行對象進行動態的className屬性的指定,那麼前提是,先定義好類選擇器。
2、爲了完成高亮,需要用到兩個事件,onmouseover(鼠標進入) onmouseout(鼠標移出)
3、爲了方便可以在遍歷行對象時,將每一個行對象都進行兩個事件屬性的指定,並通過匿名函數完成該對象的處理。
4、高亮的原理就是將鼠標進入時的指定顏色改變,改變前先記錄住原來行對象的樣式,這樣在鼠標離開時,可以講原樣式還原。
5、該樣式需要在頁面加載完後直接顯示,所以使用的window.onload事件完成。
5、完成一個與css手冊中一樣的實例
通過下拉菜單選擇指定樣式屬性的使用效果。
6、表單的組件。
單選框、複選框。這兩個組件都用一個屬性來表示其選中與否的狀態。checked完成一個對多個複選框進行全選的操作。
思路:將全選那個複選框的checked狀態賦給所有的checkbox即可。
<input type ="checkbox" name="all" onclick=''checkAll()/'>全選
<input type="checkbox" name="item"/>
<input type ="checkbox" name="item"/>
<input type="checkbox" name="item"/>
<input type="checkbox" name="all" onclick="checkAll()"/>全選
<script type="text/javascript">
function checkAll()
{
var node=document.getElementsByName("all")[0];
var items=document.getElemetByName("item");
for(var x=0;x<items.length;x++)
{
items[x].checked=node.checked;
}
}
</script>有兩個全
1、可以向裏面傳this.function checkAll()可以傳個對象
2、什麼也不傳可以通過event.srcElement
3、可以通過傳角標function checkAll()也傳個角標。
7、獲取鼠標的座標,讓指定的區域隨着鼠標移動獲取鼠標座標 event.x和event.y指定區域隨鼠標移動其實就是改變了指定區域的left和投票屬性的值。這裏需要用到的事件:body對象的onmouseover事件,還需要用到一個css樣式,直接定義頁面,所以區域都在同一層次,爲了對某一區域進行定位,將該區域分離到另一個層次,用到css中的position屬性。