Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery / Onchange

Generate N Number Of Table Rows Depending On Value Of Input Jquery

Post a Comment
Floor Nam

Solution 1:

see your updated fiddle: http://jsfiddle.net/fq42seff/3/

i first added the class="floor" to all your floor input boxes, to have a unique selector for these input boxes. the entry field for the amount of floors and the total field is excluded.

then i changed your js the following:

//created two functions addFloors() and removeFloors()functionaddFloors(actual, target){
  for(i = actual +1;i<=target;i++) //this loop creates the new floors
    {
      newItemHTML = '<tr><td ><p>' + i + 'th Floor</p></td><td><input type="text" name="" class="floor InputBox " id="floor' + i + '"></td></tr>';
      //i also changed the html inside the first td from <span> to <p> to match your html markup
      $("table#floor tr").last().before(newItemHTML);
    }
}

functionremoveFloors(target){
  if(target >= 4) //remove all floors except the base 4
  {
    $('.floor').slice(target).parent().parent().remove(); 
    //since i select the .floor input box, i have to use the parent() function two times, to move the selector up to the <tr> element
  }
}

next, we extend your change function:

$("#nostorey").bind('change', function() {
  curVal = $.trim($(this).val()).match(/^\d*$/); //get the value from the first input box
  curFloors = $('.floor').length; //get the current nbr of floorsif(curVal > curFloors)  //if you want more floors, then currently available
{
    addFloors(curFloors, curVal);  //add floors
}elseif(curVal < curFloors)  //if you want less
{
    removeFloors(curVal);  //remnove them
}

last but not least, enable/disable the first 4 input boxes:

$('.floor').each(function(index){  //for each .floor input boxif(index >= curVal)  //if it's index is greater then the needed floor count
  {
    $(this).prop('disabled', true);  //disable it
  }else
  {
    $(this).prop('disabled', false);  //else enable it
  }
});

the last part - the enabling/disabling could be splitted and extend the add/remove functions - this would make them get run only when needed. right now, it gets executed on every value change. but i guess, you can figure out the rest by yourself...

Solution 2:

I added a grid of checkboxes depending on the number of floors also upon generating these checkboxes i put an attribute for each checkboxes depending on which row they are in. The span text or that row will be the value of the checkboxes for that row. With the help of

Guruprasad Rao

he came up with this fiddle

Fiddle

For code betterment feel free to update the fiddle to help others

Solution 3:

Correct me if I am wrong. Here is my for loop. 

else {

var floors = parseInt($("#nostorey").val()-4); 

$("tr[id^=floor]").hide();

if(floors != NaN){

for(i=5;i<floors+5 ;i++){

    var newItemHTML = '<tr id="floor'+i+'"><td ><span>' + i + 'th Floor</span></td><td><input type="text" name="" class="InputBox floor"' + i + '"></td></tr>';

    $("table#floor tr").last().before(newItemHTML);
}

}

Post a Comment for "Generate N Number Of Table Rows Depending On Value Of Input Jquery"

Menu Halaman Statis