Auto increment data inside the HTML Table with Javascript or jQuery

Question

I am a new to javascript. I have a problem in HTML table. (This is only a reference because the whole table will have a range of 100,000 to 2,000,000.)

This is a list and it is kinda large and to create this manually will take very long plus if I input a single "range" wrong I'll have to edit and re-arrange then check if the "range" is correct again. I am hoping that this can be done in javascript. Anyone can help me to make the "range" to a variable like "r-1 and r-2" and a function can fill the variable increments to 5,000 or 10,000 automatically starting from 100,000 up to 2,000,000.

HTML Table

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>

I'd consider maybe just dynamically building the rows as well, since you aren't going to want 300+ variables to deal with. Check out api.jquery.com/append and w3schools.com/js/js_loop_for.asp see what you can come up with. Post problems here. — MikeSmithDev
– MikeSmithDev, Commented Nov 17, 2012 at 17:51
@MikeSmithDev how can i control the increment value, I don't want to increment it by "1", how can I increment it in 5,000? — IAMTHESTIG
– IAMTHESTIG, Commented Nov 17, 2012 at 18:37

charlietfl · Accepted Answer · 2012-11-17 19:12:56Z

2

This will build the table structure shown

 $(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/

edited Nov 17, 2012 at 19:12

answered Nov 17, 2012 at 18:52

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IAMTHESTIG Over a year ago

Nice! How can I remove the last data, because it is not needed anymore. (the last 2,000,000)

IAMTHESTIG Over a year ago

Just one last question, if I want to increment it in 10,000 where should i change the code? I'm trying to change it but it disappears.

IAMTHESTIG Over a year ago

got it, just change the 5's to 10's, Thanks for this great code!

charlietfl Over a year ago

when I started I was reading table backwards... I should have used 5 as my increment and simplified my for loop

Anton Egorov · Accepted Answer · 2012-11-17 19:45:35Z

1

Sure. Old code became redundant, so I deleted it. Check out jsFiddle: http://jsfiddle.net/WFqTX/4/

You can now control you start, end, step and all other parameters:

    /* 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;

edited Nov 17, 2012 at 19:45

answered Nov 17, 2012 at 17:53

Anton Egorov

1,3841 gold badge16 silver badges35 bronze badges

2 Comments

IAMTHESTIG Over a year ago

My knowledge to javascript is very limited to well documented wordpress plugins and jQuery plugins like fancybox. I'm kinda in a noob level so I don't understand whats going on in the code above you've given me, if you can illustrate it to jsFiddle it would be much appreciated.

Anton Egorov Over a year ago

No problems, I've updated the code, now it works properly, you can check out jsFiddle again, everything is commented. Good luck! :) jsfiddle.net/WFqTX/4

Collectives™ on Stack Overflow

Auto increment data inside the HTML Table with Javascript or jQuery

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related