javascript動態數據（javascript動態頁面）

本文目錄一覽：

• 1、求教關於javascript獲取動態表格數據的問題，如何獲取動態ID
• 2、如何爬取網頁中js動態生成的數據
• 3、用js實現動態添加表格數據

求教關於javascript獲取動態表格數據的問題，如何獲取動態ID

文本框做一個觸發事件，文本框的id或者name是按照列命名，例如

input name=”gz_zhangsan”/ 代表廣州張三，

編輯文本框的時候，根據name找到具體的人，則進行重新統計所在列的值（例如統計張三）,然後找到張三所在的表二的顯示位置，更新！

html

body

div

table  border=1

thead id=’th’trtd區域/td/tr/thead

tbody id=’tb1’/tbody

/table

table border=1 

theadtrtd姓名/tdtd合計/td/tr/thead

tbody id=’tb2’/tbody

/table

/div

/body

script type=”text/javascript”

var p=[{name:’張三’,data:[30,40,50,60]},{name:’李四’,data:[33,40,55,67]},{name:’王五’,data:[30,10,20,20]},{name:’趙六’,data:[10,10,30,20]}];

var address=[‘廣州’,’深圳’,’上海’,’成都’];

window.onload=function()

{

    var th = document.getElementById(“th”);

    var tb1=document.getElementById(“tb1”);

    var tb2=document.getElementById(“tb2”);

     var sum =0;

     var tr;

     var td;

     var input;

     var rowAddress;

     for(var i=0;i address.length;i++)

     {

         rowAddress = document.createElement(“tr”);

          td = document.createElement(“td”);

          td.innerHTML = address[i];

          rowAddress.appendChild(td);

          tb1.appendChild(rowAddress); 

     }

     for(var i=0;i p.length;i++)

     {

        sum =0;

        var th_col = document.createElement(“td”);

        th_col.innerHTML = p[i].name;

        th.rows[0].appendChild(th_col);

        for(var j=0;jp[i].data.length;j++)

        { 

           rowAddress=tb1.rows[j];

            sum+= p[i].data[j];

            td = document.createElement(“td”);

            input = document.createElement(“input”);

            input.value =  p[i].data[j];

            td.appendChild(input); 

            input.colIndex = i;

            input.onchange=function()

            {

                var sum=0;

                for(var i=0;itb1.rows.length;i++)

                {

                   sum += parseInt( tb1.rows[i].cells[this.colIndex+1].getElementsByTagName(“input”)[0].value,10);

                }

                tb2.rows[this.colIndex].cells[1].innerHTML=sum;

            };

             rowAddress.appendChild(td);

        }

         tr = document.createElement(“tr”);

         td = document.createElement(“td”);

        td.innerHTML =  p[i].name;

        tr.appendChild(td);

        td = document.createElement(“td”);

        td.innerHTML = sum;

        tr.appendChild(td);

        tb2.appendChild(tr);

     }

};

/script

/html

如何爬取網頁中js動態生成的數據

String url = “”;

try {

    WebClient webClient = new WebClient(BrowserVersion.FIREFOX_10);

    //設置webClient的相關參數

    webClient.getOptions().setJavaScriptEnabled(true);

    webClient.getOptions().setCssEnabled(false);

    webClient.setAjaxController(new NicelyResynchronizingAjaxController());

    //webClient.getOptions().setTimeout(50000);

    webClient.getOptions().setThrowExceptionOnScriptError(false);

    //模擬瀏覽器打開一個目標網址

    HtmlPage rootPage = webClient.getPage(url);

    System.out.println(“為了獲取js執行的數據 線程開始沉睡等待”);

    Thread.sleep(3000);//主要是這個線程的等待 因為js加載也是需要時間的

    System.out.println(“線程結束沉睡”);

    String html = rootPage.asText();

    System.out.println(html);

} catch (Exception e) {

}

用js實現動態添加表格數據

1、在頁面div中事先創建一個空白表格，可以根據需求而定。

2、表格創建好後，我們就可以寫動態生成表格的關鍵代碼了。我們寫一個js方法供觸發使用。

3、在tb標籤中我們添加了input標籤，主要是用來提供用戶輸入參數， 而全局變量num，主要是用來區分每一個添加的參數的id的唯一性而存在的。

4、獲得表格中的數據。

5、拿到表格中的數據後，我們根據它值的形式把它轉換成json格式的數據。