在這周中又學(xué)習到了這個一個js特效离钝，所以想寫下來一起分享一下；
先想要明白這個思路褪储，其實我也是不怎么明白這些的卵渴，所以想寫一下這些思路，好讓自己理解一下鲤竹；
第一個特效：點擊添加按鈕就會自動添加一行浪读；
第二個特效：點擊刪除按鈕就會對應(yīng)的刪除這一行；
第三個特效：點擊添加一行之后這行對應(yīng)前面的序號是有序的排列的辛藻，在點擊刪除之后序號也會對應(yīng)的改變碘橘，一直都是按序號排列。
大概就是這樣子的思路了吱肌，現(xiàn)在開始html中的代碼細節(jié)痘拆，
完成form表單之后，不想寫那么多css樣式的話氮墨，可以直接用bootstrap.css這個文件的樣式纺蛆，還可以自動適應(yīng)瀏覽器；
我在下邊放了我這次做的網(wǎng)頁的代碼
1：html中的代碼
2:下面的js代碼是實現(xiàn)特效的功能
//這個主要是點擊添加按鈕的時候就添加一行
function add_jietu() ? ? ? ? ? ? ? ? ? ? ? ? //定義一個方法规揪，名為add_jietu
{
? ? ? var add_jietu = document.getElementById('add_jietu'); ? ? ? ? ? ? ? ? ? ? ? ? ? ?//簡化代碼桥氏，把id名賦值給等號前面的名稱中
? ? ? ?var nodeFather = add_jietu.parentNode; ? ? ? //獲取add_jietu中父節(jié)點并賦值到nodeFather
? ? ? ? var node_clone = add_jietu.cloneNode(); ? ? //獲取add_jietu中使用cloneNode()中方法克隆所有屬性以及它們的值
? ? ? ?content = add_jietu.innerHTML; ? ? ?//innerHTML 屬性設(shè)置或返回表格行的開始和結(jié)束標簽之間的 HTML
? ? ? ? node_clone.removeAttribute('id'); ? ? ?//removeAttribute() 方法刪除指定的屬性
? ? ? ?node_clone.innerHTML = content; ? ? ?//
? ? ? ? nodeFather.appendChild(node_clone); ? //appendChild() 方法向節(jié)點添加最后一個子節(jié)點
? ? ? ? numCheck(); ? ? //執(zhí)行下下個方法的
}
//這個主要是點擊刪除按鈕的時候，就刪除一行
function deleteRow(r)
{
? ? ?var i=r.parentNode.parentNode.rowIndex; ? ? ?//定義一個變量i猛铅，值為r的父節(jié)點的父節(jié)點所在的一行字支。即是你這里的tr；rowIndex返回某一行在表格的行集合中的位置,parentNode是父節(jié)點。
? ? if(i>1){
? ? ? ? ? ? ? ?document.getElementById('myTable').deleteRow(i);參數(shù) i 指定了要刪除的行在表中的位置祥款。
? ? ? }else{
? ? ? ? ? ? ?alert("不能刪除第一行");
? ? ? }
? ? ? numCheck();//執(zhí)行下個方法的
}
//這個主要是判斷在點擊刪除之后，序號還是會自動改成的按排序的序號
function numCheck(){
? ? ? ? var num = $("#bbsTab tr").length; ? ? //獲取tr的長度
? ? ? ? for (var i = 0; i <= num; i++) { ? ? ? ? //進行循環(huán)
? ? ? ? $("#bbsTab tr .td_center").eq(i).html(i+1);
? ? };
}
