1

私はjavascriptが初めてです。HTML テーブルに問題があります。(表全体が 100,000 から 2,000,000 の範囲になるため、これは参考値です。)

これはリストであり、サイズが大きく、これを手動で作成するには非常に時間がかかります。また、1 つの「範囲」を間違って入力すると、編集して再配置し、「範囲」が正しいかどうかを再度確認する必要があります。これがjavascriptでできることを願っています。誰でも「範囲」を「r-1 と r-2」のような変数にするのを手伝ってくれます。関数は、100,000 から 2,000,000 まで、変数の増分を 5,000 または 10,000 まで自動的に埋めることができます。

HTML テーブル

jsフィドル

<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>​
4

2 に答える 2

2

これにより、示されているテーブル構造が構築されます

 $(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;
    }

デモ: http://jsfiddle.net/Nck5B/20/

于 2012-11-17T18:52:42.407 に答える
1

もちろん。古いコードは冗長になったので、削除しました。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;
于 2012-11-17T17:53:15.973 に答える