使用Javascript或jQuery自動增加HTML表格中的數據

Question

我是一位JavaScript新手。我在HTML表格中遇到問題。 （這只是一個參考，因爲整個表的範圍是10萬到2,000,000）。

這是一個列表，它有點大，手動創建這個會花費很長時間，如果我輸入一個「範圍「錯了，我將不得不編輯和重新安排，然後檢查」範圍「是否再次正確。我希望這可以在JavaScript中完成。任何人都可以幫助我將「範圍」設置爲「r-1和r-2」這樣的變量，並且一個函數可以從100,000到2,000,000自動將變量增量填充到5,000或10,000。

HTML表

jsFiddle

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td class="range" width="15%">100,000 - 105,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">125,000 - 130,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">150,000 - 155,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">175,000 - 180,000</td><td class="value" width="10%">VALUE</td> 
    </tr> 

    <tr> 
      <td class="range" width="15%">105,000 - 110,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">130,000 - 135,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">155,000 - 160,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">180,000 - 185,000</td><td class="value" width="10%">VALUE</td> 
    </tr> 

    <tr> 
      <td class="range" width="15%">110,000 - 115,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">135,000 - 140,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">160,000 - 165,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">185,000 - 190,000</td><td class="value" width="10%">VALUE</td> 
    </tr> 

    <tr> 
      <td class="range" width="15%">115,000 - 120,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">140,000 - 145,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">165,000 - 170,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">190,000 - 195,000</td><td class="value" width="10%">VALUE</td> 
    </tr> 

    <tr> 
      <td class="range" width="15%">120,000 - 125,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">145,000 - 150,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">170,000 - 175,000</td><td class="value" width="10%">VALUE</td> 

      <td class="range" width="15%">195,000 - 200,000</td><td class="value" width="10%">VALUE</td> 
    </tr> 
</table>​ 

Answer 1

這將構建出的表結構

$(function(){ 
    /* start & end divided by 1000*/ 
    var start=100, end=2000, increment=25, rowCellCount=4;; 
    var html=[]; 
    for(i=start; i<= end- (increment*rowCellCount)+increment ; i=i+5){ 
     html.push('<tr>'); 
     for(j=0; j< rowCellCount; j++){ 
      var valueStart= (i+j*increment), valueEnd=valueStart+5; 

      var text= parseThousands(valueStart)+',000 '; 
      text+= valueEnd <= end ? ' - ' + parseThousands(valueEnd)+',000' :'';   

      html.push('<td class="range" width="15%">'+text+'</td><td class="value" width="10%">VALUE</td>'); 
     } 
     html.push('</tr>'); 
    } 

    $('table').html(html.join('')) 

}); 

    function parseThousands(val){ 
     var txt =val.toString(); 
     if(txt.length==4){  
      txt= txt.slice(0,1) +','+ txt.slice(1)  
     } 
     return txt; 
    } 

DEMO：http://jsfiddle.net/Nck5B/20/

Answer 2

肯定。舊代碼變得多餘，所以我刪除了它。退房的jsfiddle：http://jsfiddle.net/WFqTX/4/

現在可以控制你開始，結束，一步，所有其它參數：

/* here we define variables to dynamically create your 
    data, so you don't have to write it manually */ 

    var start = 100000; 
    var end = 125000; 
    var step = 5000; 

    /* for additional variability we will set number of 
    columns as a variable */ 

    var colN = 4;